Google Font not working on Safari

Question

I'm working on making my site look the same under Safari and Chrome. In Chrome it looks exactly how I want it to. The major problem is that Google Font doesn't seem to be loading under Safari. Because I'm using the exact code given on the Google Font site, I can't understand why Safari won't fetch it. Is it just incompatible with Safari and I have to rely on a fallback font?

The site can be found here

@NickR +1 Thanks, actually it was supposed to be the ending tag. — Juicy, Jun 05 '14 at 13:49
Ah it turns out that it is actually working. But you have `font-weight:bold` on the `
` tag, which is causing the font to look so different in Chrome vs Safari - if you have a look at this image of the site in Safari with font-weight:bold turned off : http://i.imgur.com/tBvw25F.png Basically don't use the `light` version of the font and try and make it bold in `CSS`, instead use the `bold 700` version of the font - http://www.google.com/fonts#UsePlace:use/Collection:Nunito — Nick R, Jun 05 '14 at 14:13
@NickR Thank you! It does look better now. I've taken the bold weight off, it's closer to what I want it to look like. Is it normal that fonts with exactly same config look different between browsers? Or does it stem from my poor CSS skills? — Juicy, Jun 05 '14 at 14:16
I think this article explains it quite nicely - http://alistapart.com/article/say-no-to-faux-bold — Nick R, Jun 05 '14 at 14:30

score 40 · Answer 1 · edited Aug 31 '22 at 14:53

40

Your CSS should not only contain

font-family: 'Source Sans Pro', sans-serif;

it should also have values for FONT-STYLE and FONT-WEIGHT:

font-family: 'Source Sans Pro', sans-serif; 
font-weight: 900; 
font-style: italic;

in case you use a font that contains those values like for example: https://fonts.googleapis.com/css?family=Source+Sans+Pro:900italic

edited Aug 31 '22 at 14:53

Raphaël Balet

6,334
6
41
78

answered Nov 27 '15 at 14:14

Robert

451
4
4

1

Yes adding `font-style` and `font-weight` worked for me. I was using an italic version of a font imported into a sass file, it worked on Chrome, but needed the `font-style` and weight for safari – timhc22 Jun 02 '16 at 09:48
Holy crap I've spent hours today trying to figure out why a custom font wouldn't load on MacOS/iOS - font-weight and font-style were already declared in the @font-face declaration but finally adding this to the main CSS declaration where the font is defined finally made it load correctly on Safari. Thanks for saving me from bashing my head against the wall! – Charlie Feb 07 '23 at 18:35

oivvio · Answer 2 · 2018-09-12T11:30:57.440

A 2018 update

I've had this problem in the past and I've had to resort to the option of providing more font file formats. I was a bit surprised to encounter it again in 2018. But it turned out that my problem was not with file-formats but simply with not requesting and specifying the correct font weights.

If we don't customize the URL for requesting this font from Google our link tag will look like this:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

Let's have a look at what is inside that requested URL. It's going to contain several font-face rules looking something like this:

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Notice the font-weight attribute. It's specified as 400 which is a "normal" weighted font. Some browsers are able to take this font and turn it into a bold and still look half way decent. This is called "faux bold". It's never going to look as good as a hand crafted bold font though. And on some browsers, notably mobile Safari, it's going to fall down flat and look horrible.

The remedy is to request and specify the actual font weight variants you want to use. In my case it looks like this:

This will produce the following link tag:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&amp;subset=latin-ext" rel="stylesheet">

If you look at the contents of that URL you'll find that there are now entries for font-face rules font-weight: 700 in there.

Now if I want to use the bold version of this font for my h1 tags I'll use the following CSS.

h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
}

Most browsers will automatically set h1 as font-weight: bold. If I want to take advantage of that default setting I have to provide my own font-face rules. I can do this by simply duplicating the font-face rules supplied by Google, exchaging font-face: 700 for font-face: bold and putting those changed rules in my own css.

So this rule:

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Would become this:

/* latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: bold;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Now an h1 tags with font-family: 'Source Sans Pro' will be using the correct font variant. If you want a more in depth read check out this 2012 A List Apart article.

I don't know why, but my link doesn't work ``, but if I copy the CSS, then it works well. — nZeus, Jan 26 '22 at 13:08

score 13 · Answer 3 · answered Apr 27 '16 at 08:54

13

If you are using an @import code in the css like this

delete it and use link in head tag

answered Apr 27 '16 at 08:54

Hakan

1,199
1
14
18

Big help!! Thank you! – hardba11 Apr 04 '17 at 00:30

Riskbreaker · Accepted Answer · 2014-06-05T14:19:01.197

10

For some odd reason I have experience this on some web fonts from Google...when this has happened I usually get them to my server and/or convert them in fontsquirrel....Safari should be able to take TTF Files no matter what ver:

Nunito TTF ver

edited Jun 05 '14 at 14:19

answered Jun 05 '14 at 13:54

Riskbreaker

4,621
1
23
31

1

Google Fonts generally work in Safari, so something else must be happening... what version of Safari? How do you know it's not working -- are you seeing an error in your dev tools console? (For how it's used in your nav header, the characters look almost indistinguishable from most sans serif fonts anyway). – Ben Jun 05 '14 at 13:58
@BenPoole agreen with Ben ...maybe you can screenshot your Safari and see how it looks? – Riskbreaker Jun 05 '14 at 14:01
Just doing a bit of investigating...It's being served up as a `.woff` file - http://fonts.googleapis.com/css?family=Nunito:300 - This says http://caniuse.com/woff that Safari 5.1+ can use `.woff` files, although I just checked OPs site in 5.1.7 (Windows Safari) and the font isn't working. – Nick R Jun 05 '14 at 14:02

score 8 · Answer 5 · answered Dec 05 '14 at 13:13

8

My case was that I used font name without quotes. So just change

body{
    font-family: roboto, Arial, sans-serif;
}

to

body{
    font-family: 'roboto', Arial, sans-serif;
}

Chrome works perfectly without quotes, but Safari doesn't.

answered Dec 05 '14 at 13:13

shukshin.ivan

11,075
4
53
69

1

funny thing - had the problem with the same font – mklb May 13 '15 at 08:16
Thanks for this.. I too had the same font issue – Mike Anson Mar 02 '16 at 10:40

user2622348 · Answer 6 · 2015-09-30T08:30:41.647

6

I had a case where a Google Webfont (Londrina) did not show up in Safari (for Windows), because I used text-rendering: optimizeLegibility;. After removing that, it was fine.

Example: http://codepen.io/julia-r/pen/gagbdy

edited Sep 30 '15 at 08:30

answered Sep 29 '15 at 13:37

user2622348

145
3
7

6

I don't have a new question, I just wanted to mention another reason, why a font might not show up. Maybe I didn't make that clean enough... – user2622348 Sep 30 '15 at 08:24
3

Not quite sure why anyone would think this was a new question. Over-zealous copypasta? – Matt Fletcher Sep 07 '16 at 20:46

score 4 · Answer 7 · answered Apr 14 '21 at 20:39

4

Twas happening in 2021 for me. Had to switch the ampersand in the URL to &.

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;700&display=swap" rel="stylesheet">

answered Apr 14 '21 at 20:39

Steve Chab

319
3
9

1

Same for me, 2022 and this was the solution that worked! – Kiki Jan 14 '22 at 06:49
This completely fixed my solution. – Leanne Jun 27 '23 at 09:25

score 0 · Answer 8 · edited May 02 '22 at 06:57

The only way that solved this problem for me was by updating the link in the head from this:

<link href="https://fonts.googleapis.com/........" rel="stylesheet">

...to this:

<link href="https://fonts.googleapis.com/........" rel="stylesheet" type="text/css" />

My solution was adding the type attribute with a value of text/css to the link element in the head of the file.

Hope that helps someone.

score 0 · Answer 9 · answered Nov 19 '22 at 12:29

Also we need to pay attention to CSP if we have it configured. In Firefox and Chrome Content Security Policy was asking for font-src but Safari (both macbook and ios) was asking for style-src. Based on your personal policy for fonts, these settings must be adapted per browser as well.

score 0 · Answer 10 · answered Mar 19 '23 at 16:18

today i had a similar problem. Page in Safari (in chrome, firefox, edge all work fine). Problem has been solved.

In order for the font to display in safari, we need to change the font link:

<link href="https://fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800" rel="stylesheet">

to this:

<link href="https://fonts.googleapis.com/css?family=Montserrat:thin,extra-light,light,100,200,300,400,500,600,700,800&display=swap" rel="stylesheet">

we nedd to add "&display=swap" in the end of the link.

the rest of the css code looks like this:

html, body {font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 300; font-style:normal;}

score 0 · Answer 11 · answered Mar 24 '23 at 21:59

I was having the same issue and mine was fixed by adding 2 after css in the URL.

BEFORE

https://fonts.googleapis.com/css?family=Chivo:wght@400;500;600;700&amp;display=swap

AFTERWARDS

https://fonts.googleapis.com/css2?family=Chivo:wght@400;500;600;700&amp;display=swap

Google Font not working on Safari

11 Answers11

A 2018 update

Linked