 A very common thing we see on websites is food, a flash of unstyled text. When using web fonts, the text will be invisible until either the web font is loaded or three seconds have passed, at which point the fallback font is used. To give developers more choice over how to deal with a loading font, CSS now has the font display property. The property defines three time spans, the block period, the swap period, and the failure period. During the block period, the text will be made invisible if the web font hasn't loaded yet. Rendering is blocked on the web font. During the swap period, the fallback font will be used to render text, but if the web font is successfully loaded during the swap period, the font can be swapped from fallback to the actual web font. If the failure period is reached, loading the web font is considered to have failed and the fallback font will be used. Font display offers modes that allocate different amounts of time to the different periods. I recommend font display optional. This means either web font is available within 100 milliseconds, which you can achieve with a service worker, or it is not used at all. Font display is very new and not consistently supported, but it is a progressive enhancement. The directive is ignored unless the browser understands it and will make your user experience much, much better. Got it? Great. See you next time. Surprise, I'm back. We just saw me talk about font display and now I wanna ask you to subscribe because you probably wanna see more of these videos. And if you're interested in our live streams, the most recent one is over there.