When is a fallback font downloaded? - html

Question

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?

Answer 1

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.

Answer 2

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."