Everyone’s been talking about font-display: swap as a way of taking the pain out of loading web fonts, but here Chris looks at font-display: optional and font-display: fallback as well.
Monica takes a look at the options out there for loading web fonts and settles on a smart asynchronous lazy-loading approach.
The font-display property is landing in browsers, and this is a great introduction to using it:
If you don’t know which option to use, then go with
swap. Not only does it provide an optimal balance between custom fonts and accessibility of content, it provides the same font loading behavior that we’ve relied on JavaScript for. If you have fonts on the page that you’d like to have load, but could ultimately do without, consider going withfallbackoroptionalwhen usingfont-display.
Until it’s more widely supported, you can continue to use a JavaScript solution, but even then you can feature detect first:
if ("fontDisplay" in document.body.style === false) {
/* JavaScript font loading logic goes here. */
}
A terrific rundown of all your options when it comes to web font loading.
Some smart thoughts on web fonts.