How to Optimize Loading Speed of Web Fonts

There are of course many ways to optimize the loading speed of your website. However many people spend too much time focusing on the same issues like how images are loaded, buffered and displayed. This is of course important but there are other ways you can make your website more efficient too – this video looks at how to speed up your fonts!

Text Transcript

A very common thing we see on websites is FUT– a Flash of Unstyled Text. When using web fonts, the text will be invisible until either the web font’s loaded or three seconds have passed, at which point the fallback font is used. To give developers more choice over how to deal with the loading font, CSS now has the font display property. The property defines three time spans– the block period, the swap period, and the failer period.

During the block period, the text will be made invisible if the web font hasn’t loaded yet, rendering it as blocked on the web font. During the swap period, the fallback font will be used to render text, but if the web font is successfully loaded during the swap period, the font can be swapped from fallback to the actual web font. If the failure period is reached, loading the web font is considered to have failed and the fallback font will be used. Font display offers modes that allocate different amounts of time to the different periods. I recommend font display optional. This means either web font is available within 100 milliseconds, which it can achieve with a service worker, or it is not used at all.

Font display is very new and not consistently supported, but it is a progressive enhancement. The directive is ignored unless the browser understands it and will make your user experience much, much better. Got it? Great. See you next time. Surprise! I’m back. You just saw me talk about font display. And now, I want to ask you to subscribe, because you probably want to see more of these videos. And if you’re interested in our live streams, the most recent one is over there.

Extra Resources:
Custom IP Cloaker – cipec.org/society/ip-cloaker-ip-address-questions , everything you need to know about using a fake or hidden IP address when you’re online.

Grab your favorite shows from anywhere on ITV, my favorite online channel – just read this first.

Leave a Reply

Your email address will not be published. Required fields are marked *