Black and Gray Laptop Computer
How to control the way web fonts are loaded


If your site or web application uses web fonts, controlling how they load can be very important to improve the performance perceived by your users. The new property font-displayavailable to @font-faceallows designers to control how the website is displayed based on how long it takes for web fonts to download.

How web fonts load in each browser

Web fonts allow you to design websites with advanced fonts that are not installed on users' devices. Its main drawback is that the browser has to download these fonts before displaying them.

As the download speed of the Internet connection is not constant, sometimes downloading web fonts can have a very negative impact on the performance perceived by users. It doesn't matter how beautiful your site is if it takes ten times longer to load than other similar sites.

To mitigate the risks of using web fonts, most browsers follow this strategy: wait a short time to download fonts and after that time, if the web font is not available, another alternative font is used. The problem is that there are small variations in this behavior depending on the browser.

These are the main differences:

  • Chrome and Firefox wait 3 seconds and then show the default font. Internet Explorer does not wait to download the fonts and uses the default ones immediately.
  • If after these 3 seconds (or 0 seconds in Internet Explorer) the web font is downloaded, then the default font is replaced (the user notices a flicker when changing the font and some elements of the page may move slightly).
  • Safari has the least standard behavior of all browsers, as it does not define a wait time to download web fonts.

Worst of all, you can't change this behavior to suit your needs. Perhaps what matters most to you is performance and that is why you prefer to use the default font in the first request and use the web font in the rest of the requests once it has been downloaded. Although there are JavaScript-based alternatives, such as the Font Loading API, to control the loading of web fonts, it requires writing a certain amount of code, which in turn slows down and makes your website heavier.

To solve all these problems, the CSS working group has proposed a new descriptor for @font-facecall font-displayand it's corresponding CSS property to control how web fonts are displayed before they have been downloaded.

The download periods of web fonts

The property font-displaydivides the loading time of web fonts into three periods:

  • Period "block", during this period, if the web font is not available, the elements that want to use it have to use an invisible font instead (that is why the user does not see any text). If the web font manages to load during this period, it is used normally.
  • Period "swap", during this period, if the web font is not available, any element that wants to use it must use the default font instead. If the web font manages to load during this period, it is used normally.
  • Period "failure", if the web font is not available at the beginning of this period, the font is marked as "bad" and the default font is used instead. If the web font is available at the beginning of this period, it is used normally.

It is essential to know these periods well to use the property font-displayand to decide how to display the web fonts based on whether they have been downloaded or not.

Property options font-display

The property font-displayis actually a descriptor of @font-face, so you must define it inside the declaration @font-faceyou want to modify. Example:

@ font-face {
   font-family : 'Arvo' ;
  font-display : auto;
  src : local ( 'Arvo' ), url (https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format ( 'woff2' );
}

The allowed values for the property font-displayare auto, block, swap, fallbackand optional.

Strategy auto

This indicates that the default browser strategy should be used. Most browsers today use a strategy similar to block.

Strategy block

This strategy includes a short "block" period (the recommendation is 3 seconds) and an infinite "swap" period. In other words, the browser displays invisible text for up to 3 seconds and switches to the web font as soon as it is available, resulting in a visible flicker.

This strategy is recommended only when the web site or application needs web fonts in order to be used well.

Strategy swap

This strategy includes a "block" period of zero seconds and an infinite "swap" period. In other words, the text is visible as soon as the page loads (there is no invisible text) but it is switched to the web font as soon as it is available, so there is also a visible flicker.

This strategy is recommended when the content is more important than its design. You can even use it in elements such as the textual logo of the site: it is better than the logo is available immediately even if its design is not perfect and to see it well you have to wait for the web font to load.

Strategy fallback

This strategy includes a very short "block" period (100 milliseconds or less is recommended) and a short "swap" period (3 seconds is recommended). In other words, if the web font doesn't load fast, the default font is used. After a short time, it is waited for the web font to load and if it does not load, the default font will continue to be used until the page is changed.

This strategy is recommended for elements such as the main text of the page. This way you get the user to start reading immediately, but you don't bother him by changing the font (and therefore producing a visible flicker) when he has been reading for a while.

Strategy optional

This strategy includes a very short "block" period (100 milliseconds or less is recommended) and a zero second "swap" period. Similar to the strategy fallback, it is recommended for use when displaying the web font is not critical to the user experience.

When using this strategy, it is the browser that decides whether or not to download the web source for the following requests. For example, if you browse with a mobile device and your connection is bad, the browser will not download the fonts.

Support in browsers

Currently, this option is available in the Opera browser and experimentally in the Google Chrome 49 browser.