Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Font not working on Safari

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

like image 332
Juicy Avatar asked Jun 05 '14 13:06

Juicy


People also ask

How do I use fonts in Safari?

You can increase or decrease just the font size of pages that you view in Safari on macOS Sierra. Safari will remember your settings until you clear your History. Or you can go to the View menu and hold down the Option key while you select Make Text Bigger or Make Text Smaller.

Do Google fonts work on all devices?

You can use the font directly from there to make sure it is rendered perfectly on any device. Add the below line inside your <head> tag in your HTML file. You can read more about the Google Fonts API over here.

What is Google's official font?

Open Sans Open Sans Condensed is a highly legible font commissioned by Google and inspired by its predecessor Droid Sans. Google uses Open Sans on some of its websites and its print and web ads.


3 Answers

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

like image 173
Robert Avatar answered Sep 20 '22 16:09

Robert


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:

Screenshot from Google Web Fonts

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.

like image 41
oivvio Avatar answered Sep 20 '22 16:09

oivvio


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

enter image description here

delete it and use link in head tag

enter image description here

like image 33
Hakan Avatar answered Sep 19 '22 16:09

Hakan