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

Question

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');
        }

Just out of curiosity may I know what font we're talking about? Arial? What's so bad about using CSS: `"Helvetica Ultralight", "Helvetica Neue", Helvetica, Arial, sans-serif` ? — Roko C. Buljan, Jul 19 '14 at 04:01
@RokoC.Buljan Helvetica-Ultralight, and I'm trying to change it to Arial, sans-serif — ddolce, Jul 19 '14 at 04:02
@RokoC.Buljan I actually never knew what the entire expression meant. Does it mean the main font is Helvetica and Arial is the backup font? — ddolce, Jul 19 '14 at 04:04
Yes. It means that the first font is used if it exists, if not the second if it exists, and so on for the rest of the fonts. — Nick McCurdy, Jul 19 '14 at 04:06

score 4 · Accepted Answer · edited May 23 '17 at 12:16

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.

Nick McCurdy · Answer 2 · 2014-09-18T14:26:20.990

2

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>

edited Sep 18 '14 at 14:26

answered Jul 19 '14 at 04:04

Nick McCurdy

17,658
5
50
82

score 1 · Answer 3 · answered Jul 19 '14 at 04:12

1

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;'});

answered Jul 19 '14 at 04:12

Ruchir Gupta

990
3
10
20

Before downvoting, please let me know what is my mistake :( – Ruchir Gupta Jul 19 '14 at 04:16
I personally don't see any mistake but isn't it simpler like: `$('h1').css({fontFamily:'Arial, sans-serif'});` – Roko C. Buljan Jul 19 '14 at 04:18
@RokoC.Buljan The question is asked - "Why the code is not working?" I just found a bug in his code and reported here. I know there is a better way to implement what he is trying to. – Ruchir Gupta Jul 19 '14 at 04:18
The Q.Title is: `JQuery: changing font based on user's operating system?` and jQuery is not needed – Roko C. Buljan Jul 19 '14 at 04:19

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

3 Answers3