How to Load Web Fonts in 2019 🎆

[@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!

[@steadyannie3467]

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.

[@OfficialDevTips]

Thanks Annie for the input in this! That really seems like a very performant approach. But as you say, a lot of work to maintain. What got me looking into this was SEOing existing sites, trying to find what is workable without taking too much resourses from the development team. When I get the time to continue on the online business, I'll go for something like your approach most definitely!

[@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.

[@OfficialDevTips]

Ooo that's a neat trick! I like it!

[@Booyamakashi]

Im using slightly worse approach - lazy caching font file in localstorage, next time user loads the page, it uses font from LS (its faster than browser cache afair)

[@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.

[@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.

[@OfficialDevTips]

Thanks for the comment! I like the insights. We should definitely do more on file compression, caching, and the whole "everyone has this resource already" from the most popular CDNs. "Widely used", it depends on the market of course. Globally according to caniuse.com/#feat=css-font-rendering-controls font-display is about 80% covered on mobile devices. And in Sweden it is about 85%. I would still say that reaches quite a few. The cache thing is because I come from the SEO perspective, trying to rank for best performance in regards to Googlebot, where a user probably have never even heard of my website. AND because I love being able to use custom fonts to stand out from the rest of the internet that all use Open Sans and Roboto :D

[@christophervoigtYT]

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

[@OfficialDevTips]

Great idea!

[@Hiregaadiin-ew6gd]

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

[@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

[@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 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

[@matteobagni1235]

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!

[@OfficialDevTips]

Haha yeah maybe - great idea!

[@OfficialDevTips]

Get a free month of learning on Coursera when you enroll in a Computer Science Specialization before 12/11/18: www.coursera.org/promo/cs-week-2018?

[@nishmamaskey1093]

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

[@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 ?

[@OfficialDevTips]

I would try to host them myself, but you can definitely just use font-face: display even on Google-hosted fonts.

[@bclaus0]

Morals are also a factor in your decision of how to load fonts. I'd stay away from Google-hosted fonts.

[@OfficialDevTips]

Haha, moral-driven development. We should talk more about that.

[@phoenixmission]

@@bclaus0 you are actually right, let's not help Google become an even bigger monopoly, what other fonts hosting service do you recommend?

[@ZinoT1]

this is helpful for front-end developer.

[@Tymon0000]

Show how to setup HTTP2

[@jokerontrack]

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

[@jokerontrack]

Yeah i know, he said 19 or 18 or whenever you want.

[@OfficialDevTips]

Haha 🤦‍♂️

[@cotin18]

Its the picture of Ålesund :D

[@1pompeya170]

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

[@DougZaga]

Did you figure out how to host fonts? Grrrrr way too technical for me...and no plug in?? lol