Optimizing font loading performance

While your browser is loading a web page, the priority of downloading font is less than other resources. There's a reason for that. But now you've got a problem - the text content of your app doesn't appear until the font is loaded. Sometimes it gets late on a slow network and you're just looking at a blank screen. Not good !

The intuitive strategy is just using a font from the device until the desired font gets downloaded. To activate that option we got a CSS property - `font-display` which can be placed inside @font-face block. The value would be - "swap". So the font will be swapped when the targeted font gets downloaded finally. But it might lead to bad UX. There are other values too and you could just use them according to your necessity. Tip - if you are using google font, they have an option to use `font-display` as a parameter in the link they provide.

Another thing to consider - you could control the priority pattern for downloading the font.

    <link rel="preload" href="/fonts/some-font.woff2" as="font">        

So here, rel="preload" attribute tells the browser to kick off the download as soon as possible. So the loading gets faster. It yet doesn't guarantee 100% that the font will be available before the content renders. It's just an option you could consider using. But there's an issue related to another good practice - using `local()` inside font-face block.

You could use `local()` along with `url()`. This would check if the desired font is already available in user's machine/device. If that's the case then the browser is not going to download the font again. Cool ! But if you used rel="preload" then there would be an early download request anyway. So set up your preloading strategy by keeping that in mind.

There's also a JavaScript API available for downloading font asynchronously. But you might not need that and I am keeping that out this article's scope. Enjoy ! :)

Photo: taken from here, follow this link if you want know more details on this topic.