Responsive Web Typography v2 Loading Web Fonts
Transcript from the "Loading Web Fonts" Lesson
>> Jason Pamental: We're gonna review a couple of quick points, and then, we'll actually go about copying one of the sample pages, and adding in everything that we need to load web fonts, and walk through all of the code that's in place there. So in implementing web fonts, don't block page render.
[00:00:24] That is the most important thing, because you have to deal with that. 53% of users on mobile or desktop, are gonna bail out on a site, if it takes more than three seconds to see content on the screen. Now, that happens to coincide with every single browser, now, standardizing on waiting for three seconds to see if those web fonts load.
[00:00:46] And after 2.9 seconds, do you wanna gamble? So that's where using things like these font loading techniques, and font display swap where it's supported, I know that was a comment in the chat room. They're all layers to this, ways to get content on the screen quickly, and then, make sure that things come in behind it, and then, complete the experience.
[00:01:13] So in making these kinds of choices, we don't wanna just check all the boxes. Likewise, we don't wanna do the same thing on Google fonts. Of course, this is now willfully out of date screenshot of the Google fonts interface, but you get the idea. If you start to customize it, it's gonna give you a little indicator that tells you how terrible a person you're being by loading too many font files.
[00:01:36] There are a little aggressive. If you select more than two, it's gonna start to tell you that you're doing bad things, but you really need to be mindful of what is a reasonable payload, in order to get a good experience. So if you remember that little bit, we've seen a couple of times now, wanting to make sure that that's the kind of experience that people have.
[00:01:58] We use something like this. So this is more complete view of calling font face observer, and then, creating the initial construction of how we're handling the class switching, looking for a session storage variable. In this case, we're only loading in one web font, so that's defined as font A.
[00:02:24] And there's a promise that's constructed when it links together all of those different assets, and once they are all true, then it will switch those classes around, and reset the session storage variable. And the important thing being here that, well there's two things, one, is it's getting the class switching done for you, and this script should be in line in the head section of the page.
[00:03:08] So that avoids some of the repaint issues that you see in Chrome. Then, going in and setting our h1, and balancing that out with, when the .wf-inactive class is present, don't call the web font, you get the stuff on screen right away. That can make a several second difference.
[00:04:46] You can also tie things into bandwidth detection. It might be a little extreme for web fonts, but I've done that with the decision to put a photo or a video on a home page, and that can be really effective, too.
[00:05:04] So how you would go about knowing if, for example, in the UK how [INAUDIBLE].
>> Jason Pamental: Well that's the trouble, is that you can't really know objectively. You have to structure you code to work, you just kinda have to make inferences. So that's why one of the things that a lot of frameworks will do, is you write your HTML with a node JS class in the HTML element.
[00:06:48] It might take a couple seconds longer for stuff to load, and show up onscreen. That's where you have to weigh what's most important, ultimate performance, or experience. So you have to make a little trade off there, because we can't know. It's not possible given the nature of the web right now.