Skip to content

Instantly share code, notes, and snippets.

@jonathanvoelkle
Created September 25, 2018 17:05
Show Gist options
  • Save jonathanvoelkle/916b4ad3b54a196a49377fecf80860a2 to your computer and use it in GitHub Desktop.
Save jonathanvoelkle/916b4ad3b54a196a49377fecf80860a2 to your computer and use it in GitHub Desktop.
(Google Chrome) Lighthouse Improvements

Lighthouse Audit

Text is invisible while webfonts are loading

Which font-display value to use?

This depends a lot on how you are using your webfont, and whether rendering the text in a fallback font makes sense. For example, if you're rendering the main body text on a site, you should use font-display: optional. On browsers that implement it, like Chrome, the experience will be much nicer: your users will get fast content, and if the web font download takes too long, they won't get a page relayout halfway through reading your article.

If you're using a web font for icons, there is no acceptable fallback font you can render these icons in (unless you're using emoji or something), so your only option is to completely block until the font is ready, with font-display: block.

src: Font-display playground

See also

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment