Q21: Font Strategies

[00:00:00]
>> Connect the font strategies to their definitions. So we have font-display block, swap, fallback, optional, and auto. And then temporarily renders an invisible font until the custom font has been downloaded. Use a fallback font while the custom font is downloading. And switch to the custom font when available.

[00:00:17]
Only use the custom font if it's available and otherwise just use a fallback font. Allows the browser to determine the most appropriate behavior for font loading, or use a custom font if it's available, and use a fallback font if the custom font is not available [LAUGH]. So first we have font-display block which temporarily renders an invisible font until the custom font has been downloaded.

[00:00:42]
Then we have swap which uses the custom font if it's available or use a fallback font if the custom font is not available. We have fallback to use a fallback font while the custom font is still loading and switch to the custom font when it's available. We have optional to really only use a custom font if it's available within a short amount of time, otherwise just keep on using that fallback font.

[00:01:02]
And auto is kind of just either of the above, whatever the browser feels like to determine the most appropriate behavior for the font loading. So to kind of visualize block, so first it just renders that invisible font. And if the custom font isn't available at the point which is usually around three seconds, it will fall back to a system font.

[00:01:21]
And then anytime as the fallback or only whenever the custom font loader has loaded will it swap to that custom font. But that swapping period is just infinite, so it'll just render the fallback font until the custom font is available. Now, with the invisible period you will get that flash of invisible text, that F-O-I-T that you can sometimes or that, I don't know, abbreviation you might see sometimes.

[00:01:46]
>> FOIT.
>> FOIT, yeah, FOIT, [LAUGH] one of those. So yeah, that's with block. Next we have swap which doesn't render the invisible font at all. So in this case, you don't have that invisible text but you have the unstyled text with this FOIT stuff that we're just talking about.

[00:02:03]
So whenever the font is available, then swap to the custom font. Next, we have fallback which only has a very short invisible period. And then it just uses or it renders the fallback font if it's not available at that moment. And if the custom one still hasn't loaded after I believe it's three seconds, then it will just keep on using the fallback font.

[00:02:27]
There will be no swapping. So it kind of says, all right, it's fine, I'll render fallback font for now. But at this point you really need to be loaded or otherwise I'm not even gonna swap you anymore. To kind of make sure that the user experience is not or that the page doesn't jerk around too much if a custom font is loaded later.

[00:02:44]
But if it is loaded, then it'll use the custom font. That was a weird thing. And then we have optional which it also renders that invisible font for a very short amount of time. And even after that short amount of time, if the font hasn't loaded, then it's like, all right, I won't even try.

[00:03:03]
There'll be no swapping. It might still download the web font in the background so maybe the next that page that uses it will still use the custom font. But on the current page of use optional, it'll just keep on using the fallback font if it's not instantly available.

[00:03:19]
Yeah, and then there's no auto cuz the browser is just kind of checking which font method is best to load with the current bandwidth, network connections, stuff like that.
>> Question, have you ever had to or which process would be the best way to handle fall jank, kind of?

[00:03:43]
>> It depends, for example, optional is pretty good if the content that you're rendering is just super important for the user to read. And you don't wanna create a negative experience by cause suddenly swapping it, this shouldn't really be for a title.
>> System to the custom.
>> Yeah, so normally I use swap cuz there you don't have the invisible fonts, you have the unstyled font which isn't great.

[00:04:08]
But you have custom fallback fonts so you can also set which could be a font and you also have the adjust line height. You have glyph stuff that you can also add to your font face to really, really get your fallback font super close to your web font so that you don't have that layout shift.

[00:04:26]
Cuz sometimes what happens is that a fallback font is way bigger or smaller than a custom font, and then it suddenly renders on two lines instead of one and that's just horrible. You get a bad CLS. It's super bad. For example, NextJS and also others have next fonts which automatically creates a fallback font based on the web font that you're gonna use.

[00:04:45]
So it uses with the glyphs and everything. I don't know too much about type phases and stuff like that. But yeah, it tries to closely match the web font so that your fallback font is still instantly available. It's still just a system font but the glyphs and everything kind of precisely match the web font that you're gonna, which is pretty cool, I think.

[00:05:05]
But yeah, just make sure that the fallback font isn't like Times New Roman when your custom font is some sans serif stuff. Yeah, but they all have their use cases. It just depends on the type of content that you're rendering, I guess.