How to load web fonts like a Boss

#css #webfonts #performance

Often when loading webfonts, you will come across this problem: While the font is loading, the text is simply transparent.

Google claims that this can be fixed using "display: swap;" in the font style sheet, but for some reason that didn't work for me.

Solution

How I solved this problem:

A normal font import

<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

When using this sort of font import, the problem I described above will occur.

A better one

To solve our problem, we set the link's "rel" attribute to "preload". This tells it to load the font in the background, but not apply the style. We then attach an onload listener that changes the "rel" attribute to "stylesheet" as soon as the font loads, thereby applying the style:

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">

While the browser loads the font, the fallback font will render, as if it had failed to load the font. As soon as the font loads, the browser will switch to the loaded font.