Morden new websites used custom web fonts. Web fonts are the fonts that are not available in the browser by default. They are the fonts that are fetched remotely and rendered by the browser. Custom web fonts are used everywhere in the world but many websites load them improperly.
Web fonts allow us to build a better web experience, but these fonts also cause a lot of problems like performance-related issues, slow loading time, blocked rendering, and swapped fonts during navigation.
This demo shows you how to preload web fonts to remove any flash of unstyled text. There are just four steps need to take when loading a custom web font:
-
Use the correct font format
-
Preload fonts
-
Use the correct font-face declaration
-
Avoid invisible text during font loading
1. Use the correct font format
There are so many fonts format that you can use like ttf, woff, svg, woff2. How do you know that which one is better? That’s simple, at the moment you only need to support woff and woff2. Woff font format is developed by Google. Woff is already zipped by default, which is partly why it is faster and better than all other formats and it is supported by all modern browsers. Woff2 is a faster and even better version of the woff format, but it’s not supported by internet explorer.
2. Preload fonts
You can preload the web fonts that are required immediately. Add the Link element for the application at the head of the document:
<head>
<link rel="preload" as="font" type="font/woff2" href="fonts/Sacramento-Regular.woff2" crossorigin="anonymous">
</head>
In the above example, the as="font" type="font/woff2" attributes ask the browser to download this resource as a font.
The use of crossorigin here is important; without this attribute, the preloaded font will be ignored by the browser, and a new fetch will take place.
3. Use the correct font-face declaration
Declaring a font-face family is quite easy but we must take care of certain things when we do it. Here is a correct example declaring a custom font-family:
@font-face {
font-family: 'Sacramento';
font-weight: normal;
font-style: normal;
src: url('../fonts/Sacramento-Regular.woff2') format('woff2'),url('../fonts/Sacramento-Regular.woff') format('woff');
font-display: swap;/* Read next point */
unicode-range: U+000-5FF;/* Download only latin glyphs */
}
we are using only optimized fonts woff and woff2. font-display is an important declaration because it describes how the font should behave during the page load. It determines how long a font remains invisible and when it can be temporarily replaced by an alternative system font when the font takes too long to load.
4. Avoid invisible text during font loading
Fonts are large files that take a time to load even when gzipped. To manage this, some browsers hide text until the font loads (FOIT). We can avoid the “flash” and show content to users immediately using a system font initially.
In the @font-face example, you’ll notice the font-display declaration. The value swap tells the browser that content using this font should be displayed immediately using a system font. Once the custom font will be ready, the system font will be swapped out.
