Web Fonts Demonstration

[00:00:00]
>> Jason Pamental: This is that sample page using Plex, which is a beautiful set of typefaces that IBM developed for their own identity recently. And they open-sourced all of it, so you can actually go use them if you want. But this is a quick example of dealing with the loading process well, so watch what happens here.

[00:00:22]
I'm toggling the web fonts on and off. Now, there's a little bit of jumpiness down here with the line length change, just at the bottom here. But if this were even any smaller a screen, you wouldn't really see much reflow at all. So what I'm doing is I'm toggling those wf-active and inactive classes, and I'll open up the web inspector so you can see what that actually looks like.

[00:00:52]
>> Jason Pamental: So here's the CSS on the h1 with the web fonts on. You see that it's got just the normal styles there. And when I toggle them off, when the wf-inactive class is present, notice it's calling Georgia, it's not calling Plex Serif. And then it's got a letter spacing of -5 pixels.

[00:01:16]
And watch what happens when I turn that letter spacing off. See how much things sort of jump around? Now, that might not be a big deal with this view, but what if the window were just a little bit narrower, and that spacing was coming and going? It could actually be enough to force that to wrap.

[00:01:40]
Now I won't be able to show you.
>> Jason Pamental: Of course not.
>> Jason Pamental: Best laid plans. Well, we do the same thing with the h2 where there's actually a fairly significant jump.
>> Jason Pamental: You see that stuff kinda moves around quite a bit more when the correction is there or not.

[00:02:06]
It's even more prevalent when we look here, where we have letter spacing and font size changes. So see how different it is when you don't have the correction in place. So, this took me all of about 10 or 15 minutes to add that fallback code in there. And now the experience is much more seamless for people during that loading process where things aren't really moving around.

[00:02:39]
And really, one of the only reason is you see the jump there is I still have a transition in the CSS. If I turned that off, then it would actually be pretty instant.
>> Jason Pamental: And so the way that ends up looking,
>> Jason Pamental: Is I just add that little declaration right after the paragraph stuff.

[00:03:02]
So if we go over, and I'm just gonna open this up quickly in Code. I don't wanna get too sidetracked with that just yet.
>> Jason Pamental: There we go. So we have the declaration for the paragraph, font-size and line-height. And then when .wf-inactive is present, I just change the font-size and line-height.

[00:03:30]
So I just tweak those little values. If you add the declaration, and then look at it in the browser, that's why I added that little toggle button. And that's just a little chunk of code you could drop in any page template. It's all self contained. And you can use that to kind of turn the web fonts on and off and tweak those values until things aren't moving around.

[00:03:49]
Won't take you really all that long to do. You really only have to do it once, and it will usually do enough for any other content that you'll see on your site. So really does help kind of mitigate that loading process. And should those web fonts never load, they're still going to get that experience, because the JavaScript is inline in the page.

[00:04:11]
So the class is going to get added. I mean, that's the biggest thing. You don't have to worry about the JavaScript not being delivered. It's actually in line in the page, so that way you know the class will get added. And if you have your CSS set up correctly, even devices that don't understand web fonts for whatever reason are still going to get a good experience.

[00:04:33]
>> Jason Pamental: Any questions on the stuff that I've covered so far?
>> Student: And so that wf-inactive value, that's been in there since 2010.
>> Jason Pamental: So 2010 is when the first web font loader was released by Google. They actually worked on that. I think it was Google and Adobe that worked on that together, and they open sourced it.

[00:05:01]
So very quickly, Google Web Fonts and Typekit started to make use of that, and that's where it first became a bit of a standard. Initially, fonts.com put something similar in place but they're using a different class name. And thankfully after a while they dropped that, and everybody kind of standardized on the same one.

[00:05:20]
So that way we can kind of all write the CSS, kind of across the board. So that Google Web Font Loader was the first open source project. That's kind of evolved over time. One of the people that created that initially was Bram Stein, who works for Typekit. He's recently, or more recently, created Font Face Observer.

[00:05:41]
I've found that to be the most performant way of loading stuff. If you want truly exhaustive comparisons of font-loading techniques, follow Zach Leatherman from the Filament Group. He has written some incredibly thorough analysis of different font loading techniques. I've tried many of them and I've found this to be the most reliable and the easiest to maintain.

[00:06:10]
So that's really where I went with it. There are other things that people do to optimize font performance. Many of them will stumble over the licensing with the font itself. So that's actually something kind of worth pausing for a moment. If you are going and getting fonts, you need to make sure that you have a proper license to use them on the web.

[00:06:34]
And that also means that you can't convert them. That's almost certainly a violation of the license. So getting somebody's desktop fonts and then going to Font Squirrel and turning them into a web font, that is not legit. And you're also going to get an inferior font, because those conversion processes are not optimizing things at all.

[00:06:55]
There's a ton of work that goes into making fonts work well on the web. In most cases, they're just not that expensive.
>> Jason Pamental: The client, the organization, whoever you work for, they can pay a little bit of money. It might only be a few hundred bucks to get font files that are in WOFF2 format.

[00:07:13]
That's really what you want to be using these days. You might need to have one or two other fallback versions, but WOFF2 is supported basically in every shipping browser. It's got the most compression, and the most feature support. So generally speaking, that's what you wanna be looking for.