How to Load Web Fonts in 2019 🎆

After a lot of experimentation I've come across my preferred way of loading web fonts. I have balanced ease of use, i.e. how to implement, with performance.

🗿 MILESTONES

⏯ 01:15 😵 Fixing errors: HREF instead of SRC
⏯ 03:48 Introducing font-display: swap; 🦸‍♀️
⏯ 08:30 Baseline without web fonts (Wikipedia style)
⏯ 09:24 Late preload with font-display: swap;
⏯ 12:00 PERFORMANCE COMPARISON & DISCUSSION 📊
⏯ 17:59 My actual recommendation ⭐️

Demo of examples

Repo with the examples

The Font Loading Checklist by Zach Leatherman

The Five Whys of Web Font Loading Performance (video)

The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.

DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!

DevTips has a sister channel called Fun Fun Function, check it out!

#webfonts #performance #css

[jsphpndr]

This was great. You're final choice is the same process that I follow. It wad nice to see you work it out though. It's also good to know that I'm not the only one who goes through 1K refreshes to check performance.

Great video!

[steadyannie]

Hi David, for a long time I use this Zach's technique -
1. font-family: system fonts or serif on body, depends on layout
2. preload one font which is subsetted to match the above the fold view
3. use Bram Stein's Font Observer for loading this subsetted font, then load normal version, then rest of fonts
4. host fonts on firebase or netlify and add fallback to promise if the fonts don't arrive (host on server where the document is)
But, this is a lot of effort. Thank you and Zach, for doing this experiments and tests. Great work! I will definitely simplify my font loading strategy.
There is one more technique worth a mention. Caching already downloaded fonts or static assets with service worker. I will appreciate, if you could make some videos about this subject.
Once again, thank you for this very informative video.

[MarcelRobitaille]

The best is to show a system font, cache a webfont using a service worker then display the webfont on subsequent request. You can still use webfonts, everything loads very quickly and you never have the jarring experience of all the fonts changing making things move around.

[nicoregules]

Hi David! Great video! There is yet another option, that i've been using and is the one with the best results for me, and that is converting de fonts to base64 and adding them in the font-face declaration

[milehighsi]

Nice informative video, David, thanks. Agree with the sentiment that the incredibly bloated JS technique to simply load in a typeface is not worth the hassle. It's worth noting that font-display is not widely supported - especially in the majority of default smartphone browsers, which you seem more focussed on (simulating slow 3G etc.). Please experiment with loading speed without turning the cache off to better represent a real-world scenario (especially applies when loading fonts from Google Fonts which are likely already cached in your browser, as discussed in the last video's comments). Perhaps also mention font file size and compression, too, as this can be a very considerable factor when choosing a webfont, especially with regard to loading speed, and perhaps an area which offers more gains than a loading method. Sorry, I don't mean to go on - really enjoy this channel. Cheers.

[chlorophyllkid]

Hey David, great video! I would love to hear your thoughts on icon fonts vs. svg in that regards too.

[Venistro]

19:10 I don't find that using HTTP2 is more complicated than hosting the fonts under an extra subdomain. Many vendors today have already enabled HTTP2 automatically and most browsers already support it. In addition, you have to think about the DNS query for a subdomain, which costs time. But there is also a "dns-prefetch" for better performance concerning DNS queries.

[matteobagni]

I agree with who says font-display with preload is a good enough optimisation! Of course having more tooling in spas might allow other quick wins via js and packages etc, but I didn't have gains compared to work required. I think a video about setting up all those visual testing would be very interesting!

[Hiregaadiin-ewgd]

Hi I Need Page Speed increase without plugins please help me to do this

[WarframeCrunch]

I don't understand, google pagespeed test shows that I need to use @font-face so I add it to my CSS and it still yelling for @font-face, ok so added that to header in <style> nope still not working. So maybe add swap everywhere where I have custom font? Nope still yelling, WHAT DO YOU FOKIN WANT ME TO DO?!
I have no idea how to make the page work faster by making @font-face works

[nishmamaskey]

Working on this for a while now. Can someone help me?

[ZinoT]

this is helpful for front-end developer.

[phoenixmission]

So using google fonts as a FIRST STEP, instead of WOFF2 is not an option ?. What I mean is can we go through all the steps but without self-hosting the fonts ?

[jokerontrack]

18-12-07 // Too bad we have to wait 25 days before using those methods :)

[pompeya]

just a simple font uploading, you make so long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long 20 minutes , what more you address a long long long long long long long long long speech in the front, i cant understand.i need direct solution rather than your wordy eloquent speech