When does the backup font load?

Question

If I set the Google font as a backup font, for example:

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

Will the Google font be downloaded only in the user's browser if the main font is not executed?

Answer 1

No: the browser implementation is changing, so you cannot trust that fonts will be ignored (even if they are not needed).

The client operating system, browser and version all cause a performance option - like other configuration browsers. See Adam ’s answer on browser compliance with the W3 rule. "

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

---

Saying , according to the MDN documentation , you can have “fallback” behavior 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 is not found, we continue the src list until we find a valid file. Thus, MyBackupFont.tff loaded if MyMainfont.tff cannot be found. You can also specify local files in src using local("FontName") .

---

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

Answer 2

EDIT

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

The @ font-face rule is for lazy font loading resources that only load when used in a document. stylesheet may include @ font-face rules for a font library that are used only for the selected set; user agents should only download fonts that are relevant to the style rules that apply to this page. User agents that download all the fonts defined in the @ font-face rule, not counting whether these fonts are actually used inside the page, are considered inappropriate. In cases where the font can be downloaded in cases of emergency recovery of the character, user agents can download the font if it is contained in the calculated value of 'font-family for the specified text.

Note: When writing this answer, different versions of browsers on different systems seem to have diversified this behavior. All we can do is hope that they will eventually meet specifications.

Chrome and Firefox (testing the rest) will only download fonts that are necessary to display the displayed content, regardless of what was specified via @ font-face. More importantly, if you specify the font @ font-face and then do not use it, for example

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

Then your custom font will not be downloaded , because it is not necessary.

To check which fonts load and when, open your network tab while the page is loading.

EDIT

It appears that browser behavior varies greatly due to this issue, and I recommend that you examine your individual circumstances more closely.

I can guarantee one thing, but not all fonts are downloaded all the time in all browsers, simply because you declared them via @font-face .