CODEWITHSUNDEEP
jquerycss
ddolce
ddolce

Reputation: 815

JQuery: changing font based on user's operating system?

Since Windows doesn't support Helvetica, I've been thinking of using jQuery to detect the operating system that the user is using, and change the font of some text accordingly. Here's the code I've written so far, but it doesnt seem to be working (the operating system was detected successfully tho):

<script>
        $(document).ready(function() {
            var OSName = "Unknown OS";
            if (navigator.appVersion.indexOf("Win") != -1){
                OSName = "Windows";
                $('h1').css('font-family:"Arial",sans-serif;');
            }
            else if (navigator.appVersion.indexOf("Mac") != -1)
                OSName = "MacOS";
            else if (navigator.appVersion.indexOf("X11") != -1)
                OSName = "UNIX";
            else if (navigator.appVersion.indexOf("Linux") != -1)
                OSName = "Linux";
            console.log('Operating system: ' + OSName);
        });
</script>

I'm wondering if I put it at the wrong place. Am i supposed to put it in the <head></head> block or <body></body> block? Thanks!

EDIT: actually I have the .otf file on my server and declared @font-face but it just didn't work for some reason...

        @font-face{
            font-family: HelveticaNeue-Ultralight;
            src: url('/fonts/HelveticaNeue-UltraLight.otf');
        }

Upvotes: 2

Views: 809

Answers (3)

Nicky McCurdy
Nicky McCurdy

Reputation: 19573

I would recommend against using JavaScript for this, as CSS has built in support for fallback fonts. This way, if a Windows system does have Helvetica, or if a non-Windows system is missing it, it will still choose the appropriate font.

body {
  font-family: Helvetica, Arial, sans-serif;
}
<p>Hello, world!</p>

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206478

Only some designers have installed on windows Helvetica with the whole pack, so you don't need to bother with Windows user, 99.8% of them will never see Helvetica. A common suggestion is to first serve iOS and than move on with other fallbacks
in plain CSS font-family :

 "Helvetica Ultralight", "Helvetica Neue", Helvetica, Arial, sans-serif ;

Another suggestion is to serve the browser with your own fonts or use Google-fonts service.
Most designers choose "Open Sans" as a modern and nice replacement for both Helvetica and Arial.

Upvotes: 4

Ruchir Gupta
Ruchir Gupta

Reputation: 1000

I think, your this line - $('h1').css('font-family:"Arial",sans-serif;'); is invalid. You should write something like this:

$('h1').css({'font-family':'"Arial",sans-serif;'});

Upvotes: 1

Related Questions