7

If I set a Google font as a fallback font like so:

@font-face {
    font-family: 'GoogleFont';
    src: url('GoogleFont.ttf');
}

html, body {
    font-family: 'myMainFont', 'GoogleFont';
}

Will the Google font only be downloaded to the user's browser if the main font fails?

mowgli
  • 2,796
  • 3
  • 31
  • 68

2 Answers2

3

EDIT

According to the spec, @font-face fonts should only be downloaded when they are required to render the document: http://www.w3.org/TR/css3-fonts/#font-face-loading

The @font-face rule is designed to allow lazy loading of font resources that are only downloaded when used within a document. A stylesheet can include @font-face rules for a library of fonts of which only a select set are used; user agents must only download those fonts that are referred to within the style rules applicable to a given page. User agents that download all fonts defined in @font-face rules without considering whether those fonts are in fact used within a page are considered non-conformant. In cases where a font might be downloaded in character fallback cases, user agents may download a font if it's contained within the computed value of ‘font-family’ for a given text run.

NOTE: At the time of writing this answer, different versions of browsers on various systems seem to implement this behaviour wildly differently. All we can do is hope that they will eventually conform to the spec.

Chrome and Firefox (testing others in progress) will only download fonts that are required to render the content that is being displayed, regardless as to what's been specified via @font-face. More importantly, if you specify an @font-face font and then don't use it, e.g.

.css-rule { font-family: Helvetica,'My at-font-face-font',sans-serif; }

Then your custom font face will not be downloaded because it does not need to be.

To examine what fonts are being download and when, open up your network tab during a page load.

EDIT

It appears that the behavior of browsers varies greatly on this issue and I encourage more looking into your individual circumstances.

I can guarantee one thing, however, and that is not all fonts are downloaded all the time in all browsers, just because you've declared them via @font-face.

Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
  • @CaseyFalk - open up your browsers network tab when you load your page and see for yourself. – Adam Jenkins Jul 28 '14 at 18:56
  • 4
    Incorrect, @Adam, I just tested this with a JSFiddle and **the font was downloaded even though it wasn't used.** I don't know how exactly you're testing to get this behavior... http://jsfiddle.net/cfalk/6gB74/1/ – Casey Falk Jul 28 '14 at 18:59
  • 1
    Can confirm @CaseyFalk's case on Chrome. The rendered font (check `Computed Styles` in dev tools) of the text is `Times New Roman`, but the `Network` tab shows Open Sans being downloaded, and the link for it injected into the result HTML's ``. – ajp15243 Jul 28 '14 at 19:03
  • @ajp15243 - not in my version of chrome. The stylesheet gets downloaded, of course, but the font does not. – Adam Jenkins Jul 28 '14 at 19:04
  • @Adam What version are you on? I haven't upgraded to 36 yet, still on 35.0.1916.153. Also I'm on Linux, but I don't think OS would make a difference here. – ajp15243 Jul 28 '14 at 19:05
  • Chrome 36 on windows 8. The stylesheet gets downloaded, the font does not. http://adamjenkins.s463.sureserver.com/font.jpg – Adam Jenkins Jul 28 '14 at 19:08
  • @Adam: "The stylesheet gets downloaded, of course, but the font does not." -- **Nope,** here's another example. the font is downloaded even if it is in the same stylesheet. http://jsfiddle.net/cfalk/4Eq4B/1/ – Casey Falk Jul 28 '14 at 19:08
  • @CaseyFalk - I didn't erase any network requests from the image I posted. Nor do I have open sans installed on my system. – Adam Jenkins Jul 28 '14 at 19:11
  • @Adam Interesting, here's my network activity when loading it: https://i.imgur.com/yylDtNZ.png. Looks like there might be a difference between Chrome 35 and 36. – ajp15243 Jul 28 '14 at 19:13
  • @CaseyFalk Which version of Chrome are you using? – ajp15243 Jul 28 '14 at 19:13
  • @CaseyFalk Firefox 31 and Chrome36 on Windows 8. Neither downloads the font. Which is why I edited my answer to state the the behavior appears to vary greatly and I encourage testing with your network tab open. http://adamjenkins.s463.sureserver.com/font-chrome-firefox.jpg – Adam Jenkins Jul 28 '14 at 19:16
  • @ajp15243: Version 36.0.1985.125m :) – Casey Falk Jul 28 '14 at 19:16
  • @CaseyFalk - I'm using the identical version. – Adam Jenkins Jul 28 '14 at 19:17
  • *sigh* Here, let me send you a screenshot, Adam. – Casey Falk Jul 28 '14 at 19:19
  • 2
    @CaseyFalk - I don't *not* believe you. But instead of letting this thread become a "your-screenshot-versus-my-screenshot", can't we agree that the behaviour is highly variable for reasons that aren't being explained in either of our answers? – Adam Jenkins Jul 28 '14 at 19:21
  • Oh, I totally agree; I'll make the qualifier in my answer stronger. :) It's super weird that they're performing differently. I'm on W7, but I don't think the difference between W7 and W8 would matter. – Casey Falk Jul 28 '14 at 19:23
  • The [Font loading guidelines](https://www.w3.org/TR/css-fonts-3/#font-face-loading) are terribly written if you ask me, and can probably be blamed for much of the confusion. The way I interpret it is this… If the custom font-family is *not* referred to in the page's CSS, then *none* of its fonts should be downloaded by the browser, period. If the font-family *is* referred to in the CSS, but it's not the first available font in the stack (and this is what the OP was asking about), it still *might* be downloaded, to allow for individual characters that may not be available in the first font. – Kal Jan 07 '22 at 07:09
1

No: browser implementation varies so you can't trust that fonts will be ignored (even if they are not needed).

The client's OS, browser, and version all cause variant performance -- as do other settings browsers may offer. See Adam's answer about browser compliance for W3's "rule."

Check the resources that get downloaded in your browser here and here in different browsers to see how fonts are treated.

That being said, according to the MDN documentation you can have the "fallback" behavior you're looking for if you specify multiple files in the@font-face src attribute:

@font-face {
  font-family: MyFontName;
  src: url("MyMainFont.tff"), url("MyBackupFont.ttf");
}

In this example, if the first file isn't found, then we continue down the src list until we find a valid file. Thus, MyBackupFont.tff is only downloaded if MyMainfont.tff can't be found. You can also specify local files in the src by using local("FontName").

By the way, Chris has a great article on how to "use [@font-face] responsibly."

Community
  • 1
  • 1
Casey Falk
  • 2,617
  • 1
  • 18
  • 29
  • Ok I will read, thx. But he states font-family: 'MyWebFont', **Fallback**, sans-serif; Where is "fallback" set? I can't see how I can use it for my scenario. Can you help? ;) – mowgli Jul 28 '14 at 18:32
  • Check out le updated answer. : ) He's using "Fallback" as a filler for any *local* file you may want. – Casey Falk Jul 28 '14 at 18:35
  • I already have a . Maybe I should change that to be included from the CSS file instead? – mowgli Jul 28 '14 at 18:35
  • Yuppers -- that's what I'd do. You ***could*** even grab the *.tff or *.woff url in Google's CSS file that you're importing and include it in the `@font-face` `src`. Does that make sense? – Casey Falk Jul 28 '14 at 18:37
  • Wasn't me ;) So, I should set the google font in css too (instead of include external css font?), and direct nr. 2 font to the fontface? I'm a bit confused about all this.. – mowgli Jul 28 '14 at 19:09
  • because not all browsers will download a font just because an @font-face is declared. – Adam Jenkins Jul 28 '14 at 19:11
  • Alrighty, let me add a qualifier to appease ye'. :) And @mowgli, check out the example I just added. Does that help? – Casey Falk Jul 28 '14 at 19:13
  • CaseyFalk - your edit to say "most browsers" is not only insufficient, but also inaccurate. It appears the behaviour is highly variable for reasons that aren't being explained in either your or my answers. – Adam Jenkins Jul 28 '14 at 19:20
  • @CaseyFalk - see my edited answer to see what the spec says. Browsers that download fonts when they are not required for rendering are **non-comformant**. That's not to say they don't exist, but according to the spec, they should not be. – Adam Jenkins Jul 28 '14 at 19:28
  • And so I would say that the answer, "browser implementation varies," suffices. Good point in referring straight to the W3 docs. – Casey Falk Jul 28 '14 at 19:30
  • 1
    Now I have messed with it and tested. Combined all font calls into one @font-face. First it checks for locally INSTALLED font (on machine). Then it tries google external font, and lastly it downloads local server font. Seems to be an ok solution, and now I can rest at night :) Thanks – mowgli Jul 28 '14 at 20:15
  • But I ended up trusting Google instead. Much easier :) – mowgli Aug 12 '14 at 19:55