DEV Community

Cover image for How to load web fonts like a Boss
Jake Sarjeant
Jake Sarjeant

Posted on

How to load web fonts like a Boss

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.


How I solved this problem:

A normal font import

<link href=",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">
Enter fullscreen mode Exit fullscreen mode

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=",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">
Enter fullscreen mode Exit fullscreen mode

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.

What do you think? Did this help you?

Let me know in the comment section, or by using those wonderful heart & unicorn buttons to the left!

Discussion (0)