Web Performance Optimization: Controlling Font Loading and Replacement with CSS font-display

When writing a website, some fonts on the Internet will be used more or less, Although CSS 3 has added support for Web Fonts (web fonts), the browser's loading and default processing methods for them will greatly affect the performance and user experience of the website. For example, by default, when Web Fonts is loaded, the place where the font is used will be blank, and it will not be displayed until the font download is complete. At this time, this problem can be avoided by changing the font-display property in CSS.

What is Web Fonts

Before introducing font-display, first understand what is Web Fonts. When using CSS to specify fonts in the past, only the existing fonts on the user's computer can be used. Since the fonts on each user's computer may be different, the fonts that can be used are basically some built-in fonts in the operating system, such as Microsoft Ya Black, Times New Roman, Apple Ping Fang, these are also called safe fonts (Web Safe Fonts). In order to make the font display normally, we generally specify multiple fonts at the same time through the font-family attribute. If the first font is not found in the operating system, the next fallback font (Fallback Font) will be used, and so on:

* {
 font-family: 'PingFang SC', 'Microsoft Yahei', sans-serif;
}

Later, CSS started Support the @font-face command, which can load custom font files. At this time, the font can be published together with the website. When users browse the website, they will download the font specified in @font-face. For example, the following code loads the Raleway font in the fonts directory:

@font-face {
 font-family: 'Raleway';
 font-style: normal;
 font-weight: 500;
 src: url(/fonts/raleway.woff2) format('woff2');
 }

The src attribute is used to specify the location of the font, and the url() function also accepts the network address to load the third-party Provided font files, which also spawned cloud font services like Google Fonts. However, basically only English fonts are suitable for Web Fonts, because it only has 26 English letters plus numbers, and is small in size and suitable for transmission on the network. However, there are 3,000 commonly used Chinese characters, so generally only use the operating system. Yes, but now there are also font services that dynamically generate font files based on the text used on the website.

The period when the browser loads Web Fonts

When the browser loads Web Fonts, there will be three period:

• Block Period (Block Period). If the font is not loaded during this period, the browser will use the fallback font (Fallback) in the font list specified by font-family for rendering, but the display will be blank, that is, it will not be visible to the user. During this period, the font can be displayed normally only after the font loading is completed.
• Swap Period. Similar to the blocking period, but during this period, when the font is loaded, it will first render the text with the fallback font and display it (instead of displaying blank), during which the font can be displayed normally after the font is loaded.
• Failure Period. If the font fails to load, the text is displayed using a fallback font.

As for how long each period is, it is determined according to the value of the font-display attribute .

Introduction to font-display

font-display is not exactly a CSS property, but a dedicated In the descriptor of the @font-face directive, it can take the following values:

• auto . This is the default value of font-display. The loading process of fonts is determined by the browser itself, but it is basically the same as the processing method when the value is block.
• block. Before the font is loaded, the alternate font will be used for rendering, but the display is blank, making it always in the blocking period. After the font is loaded, it enters the exchange period, and the downloaded font is used for text rendering. However, some browsers will not be in the blocking period indefinitely, and will have a timeout limit. Generally, after 3 seconds, if the font is still not loaded during the blocking period, then it will directly enter the exchange period and display the backup font (instead of blank), etc. After the font download is complete, replace it directly.
• swap. Basically there is no blocking period, directly enter the exchange period, use the backup font to render the text, and replace the backup font after the used font is loaded.
• fallback. The blocking period is very short (about 100 milliseconds), which means that there will be a blank backup font for about 100 milliseconds, and then the exchange period also has a time limit (about 3 seconds). During this period, if the font is loaded successfully, it will be replaced with If the font is not loaded successfully, the fallback font will always be used to render the text.
• optional. It is consistent with the blocking period of fallback, but there is no exchange period. If the font is loaded within 100 milliseconds of the blocking period, the font will be used, otherwise the backup font will be used directly. This means that the specified web font is dispensable. If it loads quickly, it can be displayed, but if it loads a little slower, it will not be displayed. It is suitable for when the network situation is not good, such as mobile network.

After understanding font-display, then we should not be difficult to see, for most cases Its value should be set to swap , so that the fallback font is used for rendering during web font loading, and then replaced with the specified web font after loading.

Application

Now using Google's Web Fonts font service does not require us to manually write @font-face instruction, but by calling its interface, directly return a piece of @font-face instruction CSS code, and it also supports display=swap parameter, so that in the returned CSS code, set font-display to swap , This can be seen from my website:

/* https://fonts.font.im/css?family=Raleway:500,700&display=swap */< /span>
@font-face {
 font-family: 'Raleway';
 font -style: normal;
 font-weight: 500;
 font-display: swap;
 src: url(https://fonts.gstatic.font.im/s/raleway/v19/1Ptug8zYS_SKggPNyCAIT4ttDfCmxA.woff2) < span >format('woff2');
 unicode-range: U+0460-052 span>F, U+1C80-1C88, U+20B4, U+2DE0- 2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* ... */

Browser support

Can be found from caniuse.com[1] website, this The attribute is supported in each browser (minimum version):

生"Programmer" published in 2001 has accompanied the growth of countless developers and influenced generations of Chinese technical people. After 20 years, "New Programmer" is back with in-depth content such as the deep thinking of global technology masters and the technical creation of excellent developers! At the same time, it will present a panorama of the core technology ecosystem at home and abroad to all developers in an all-round way. Scan the applet code below to subscribe now!