Font Loading Stages

[00:00:00]
>> Jason Pamental: Let me go back to taking a quick look here. We've called these styles, so we've added in the reference to web fonts and then the overall site styles. And what will end up happening. So this is just our little feature toggle here, we don't have to worry about that.

[00:00:21]
If I open this, actually I'm gonna open this page up in Chrome so we can throttle the network connection, and kinda simulate what it's like to have a really slow loading connection.
>> Jason Pamental: And the other thing that I want to do is actually go back in here. And we're gonna take out the font display swap, actually I don't think I even have it in there for that, that's good.

[00:00:49]
That's what we want.
>> Jason Pamental: So when we load this page here, what I can do and this is a really useful thing. I think a lot of the browsers are starting to include this. But Chrome has had this for a while, to be able to under Network, let me change where this is located, so I can see a little better.

[00:01:19]
>> Jason Pamental: So what we can do is when you click on Network, you can click on this little down arrow here and you can simulate different kinds of network connections. So if we simulate slow 3G and then trigger a refresh of the page.
>> Jason Pamental: So it's not, it was to be better if we can make it, like force it to be even slower.

[00:01:48]
But you can tell that it took several seconds for things to load, whereas if we are quick about adding in that fall back stuff then we actually should end up getting a better result. So if we go back in here. And I'm gonna go through this code a lot more carefully but actually I need to change this.

[00:02:15]
Good, so this will give us some things to show.
>> Jason Pamental: So we're gonna change this to Plex Serif.
>> Jason Pamental: So if I don't do anything else, I've at least triggered it to make sure that it's going to be loading those things correctly. And if I go back to Chrome, and I'm going to disable the cache, slow it down,

[00:03:12]
>> Jason Pamental: And now what we should see, if I can get this slow enough,
>> Jason Pamental: There. It's in the fallback font, and there's the web font. So that's a useful way for you to see what will end up happening. But you can see that got content on the screen a lot faster.

[00:03:33]
So if we didn't have the WF inactive CSS in there, we would have ended up waiting twice as long to get the content on the screen. So that can make the difference between somebody actually interacting with your site or just going away.
>> Student: Were you saying that's built into or Typekit, the service, the JavaScript.

[00:03:56]
>> Jason Pamental: Yep, so there's a couple of different ways. Now with each of the services, you can use JavaScript or CSS embedding. If you use the JavaScript embedding from the service, they're going to do this same kind of thing and then inject those classes in your page and then serve the stuff All of the services now will also allow you to simply get that link to a CSS file, and then let you handle it however you wanna handle it.

[00:04:30]
And that will be faster. So what I found is, with all of the services, if you're relying on them to do that kind of processing, it's probably going to take a second or two longer for you to end up getting the result back. And even a few hundred milliseconds can make a significant impact when you are talking about stuff getting drawn on screen.

[00:04:52]
So, it's definitely worthwhile, that was a huge thing, it was the most requested feature from Typekit for years. And they only made this available about six months ago for you to be able to get a CSS based kit that gives you just that one line to add. So you can see in the way this is set up, we have this line here.

[00:05:13]
This could just as easily be from Google Web Fonts or from Typekit or fonts.com. Linking to a CSS file and then font face somle server is where that gets kind of reassembled where you reference the font family name that's coming from the service or the font as you would like it to be known and which weights and styles.

[00:05:38]
So you'd have an a, a b, a c, a d for the regular bold, italic and bold-italic. And then you'd add that that in down here. So it'd be loading a, b, c, d. And once all of those are true, that's what's gonna trigger the session storage variable.

[00:05:56]
So those things in combination are what will really help out in terms of evening this experience and speeding up the redraw on one page to the next.