In-depth understanding of CSS @font-face performance optimization

This article mainly introduces common strategies for font loading optimization. Most of the content is reference and translation.

1. Basic usage of font-face

I believe everyone knows the basic usage of font-face, which is basically like this:

@font-face {
	font-family: Lato;
	src: url('font-lato/lato-regular-webfont.woff2') format('woff2'),
		 url('font-lato/lato-regular-webfont.woff') format('woff'),
		 url(font-lato/lato-regular-webfont.ttf) format("opentype");
}
p { font-family: Lato, serif; }

This will allow our web pages to use custom fonts. In addition to the font-family and src attributes, there are also font-style and font-weight attributes. src can specify multiple fonts, which will be applied in order. For example, in the above example, the woff2 font will be loaded first. If it fails, the woff font will be loaded, otherwise the opentype font will be loaded. The fonts supported by src can be of the following types:

The src parameter can be quoted or not. The meaning of the parameter varies depending on the format, such as the following:

src: url(fonts/simple.woff); /* Load simple.woff, the address is relative to the style sheet address*/
src: url(/fonts/simple.woff); /* Load simple.woff, the address is the absolute address of the website*/
src: url(fonts/coll.otc#foo); /* Load foo font from coll.otc character set */
src: url(fonts/coll.woff2#foo); /* Load foo font from coll.woff2 character set */
src: url(fonts.svg#simple); /* Load the SVG font with id 'simple' */

The font address loaded in src is subject to cross-domain constraints. If you want to load fonts across domains, you need to set CORS.

This is the most basic usage of font-face. Next we will further analyze the usage of font-face and try to find optimization strategies.

2. When will the fonts be downloaded?

The above talks about the basic knowledge of fonts, but have you ever thought about when the fonts are downloaded? When we only define the following styles in CSS, will the fonts be automatically downloaded when the page is loaded?

@font-face {
	font-family: Lato;
	src: url('font-lato/lato-regular-webfont.woff2') format('woff2'),
		 url('font-lato/lato-regular-webfont.woff') format('woff'),
		 url(font-lato/lato-regular-webfont.ttf) format("opentype");
}

Unfortunately, the fonts won't download. Normally , the corresponding font will be downloaded only when our page elements use the font defined in font-face.

Note: We say this is the normal case, because IE8 will download the font as long as the font-face is defined, even if the page element does not use the corresponding font.

It is not the same in other browsers.

For example, in Firefox and IE 9+ , fonts will be downloaded in the following situations:

html

<div id="test"></div>

CSS

#test {
	font-family: Lato;
}

What's so special about it? You may have noticed that although this element uses the font-family: Lato style, it does not have any text! ! ! . According to our ideal situation, fonts should be downloaded only when there is text content. This is the behavior of Chrome, Safari (WebKit/Blink, etc.) browsers.

Chrome, Safari (WebKit/Blink, etc.) browsers will only download fonts in the following situations:

html

<div id="test">There is text here</div>

CSS

#test {
	font-family: Lato;
}

So to sum up, different browsers download font strategies:

• IE8 will download the font as long as the font-face is defined, regardless of whether the font is actually used.
• Firefox, IE 9+ will download the font only if the font-face is defined and there are elements on the page that use the font, regardless of whether the element has text content.
• Chrome and Safari will download the font only if the font-face is defined, the page has an element with the font applied, and the element has text content.

Then you might ask, what if our DOM elements are inserted dynamically? for example:

var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';
document.body.appendChild(el);
el.innerHTML = 'Content.';

The answer is the same, its download strategy is as follows:

var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';
/* At this point, IE8 will start downloading fonts*/

document.body.appendChild(el);
/* Only here, Firefox, IE 9+ will start downloading fonts*/

el.innerHTML = 'Content.';
/* Only here, Chrome and Safari will start downloading fonts*/

3. FOIT (Flash of Invisible Text)

FOIT is the default display format of the browser when loading fonts, which means that during the font loading process, the text content cannot be seen on the page. In modern browsers, FOIT can cause this to occur for up to 3 seconds. FOIT will lead to a poor user experience, which is something we need to avoid as much as possible.

4. FOUT (Flash of Unstyled Text) and font-display attribute

FOUT means that the default system font is used during the font loading process. After the font is loaded, the loaded font is displayed. If the font is not loaded within FOIT (3s), the default system font will continue to be used.

IE and Edge do not wait for FOIT to time out before displaying the default font. They will display the default font immediately. FOUT is better than FOIT, but you need to pay attention to the reflow it causes.

So in order to make the browser have FOUT behavior, we need to add an attribute to it when setting @font-face: font-display. The default value of font-display is auto. The optional attributes and their meanings are as follows:

• auto. The font display policy is user-agent-defined.
• block. Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.
• swap. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and an infinite swap period.
• fallback. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a short swap period (3s is recommended in most cases).
• optional. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a 0s swap period.

Generally, it can be set to fallback and optional.

5. Preload

Add the following code to the page to load the font faster:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Usually used with the most basic font usage

6. Convert fonts to BASE64URI

This method is to directly change the path when defining the font in @font-face to the base64 encoding of the font.

Advantages: The advantage of this approach is that FOIT and FOUT will not occur. So there will be no reflow and repaint. Disadvantages: The font converted to base64 will also be very large, which will affect the initial loading speed of the page. The comma-separated format for loading multiple font formats is not supported. Only one font format can be loaded. This means that in order to ensure compatibility with all browsers as much as possible, you usually specify the woff format because the woff format has good compatibility, but you cannot use the smaller woff2 format because the woff2 format has poor compatibility.

7. Asynchronously load BASE64 format URI fonts

This method inserts a CSS link with a font URI in BASE64 format asynchronously.

8. Use Font Load API + FOUT + class switching

This method is to not use the @font-face class at the beginning, then use the Font Load API to load the font we want to use, and then switch the corresponding CSS. Font Load API is a native API:

document.fonts.load('1em open_sansregular')
.then(function() {
	var docEl = document.documentElement;
	docEl.className += 'open-sans-loaded';
});

.open-sans-loaded h1 {
	font-family: open_sansregular;
}

Of course, this method needs to consider the issue of browser compatibility.

9. FOFT (Flash of Faux Text)

FOFT will split the loading of the fonts into multiple parts, loading the roman web font first, and then using the font-synthesis property to render the bold and italic variants as soon as the actual bold and italic are loaded.

This method is based on [使用Font Load API + FOUT + class切換], which is very suitable for loading the same font but different weights and styles, such as Roman, Bold, Italic, Bold Italic, etc. We split these fonts into 2 stages: the first stage is the roman font, then immediately renders the artificial bold and italic, and finally (the second stage) replaces it with the real font. You can also use sessionStorage to optimize the scenario of accessing repeated views.

10. CRITICAL FOFT

The only difference between CRITICAL FOFT and standard FOFI is the loading of roman fonts in the first stage. CRITICAL FOFT will not load the entire set of roman fonts, but only a subset of it (such as A-Za-z0-9). The entire set will be loaded in the second stage.

11. CRITICAL FOFT WITH DATA URI

The only difference between this and CRITICAL FOFT is the way the Roman subset fonts are loaded. The previous one was done using the Font Load API, but here the Roman subset fonts are hard-coded into a BASE64 URI and loaded.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.