#Things to consider

  • Characters are used to digitally represent natural language. The letter a is a character, and so is 永. A character can be drawn in many ways but still have the same meaning. These drawings are called glyphs.
  • Each font has a set of languages and scripts it supports. A script, or writing system, is a way of visually conveying spoken language.
  • Webfonts will never load as quickly as locally installed fonts. If that’s not acceptable to you, then perhaps you should rethink using webfonts.
  • It’s important to understand that a FOIT (flash of invisible text) happens only when the fonts are downloading. So even if you load a stylesheet containing @font-face rules asynchronously, the font-loading will still block rendering.
  • A webfont performance budget should focus on three things: the number of font requests, font-file size, and time-to-first-render.
  • A base64-encoded font is up to three times larger than a regular font, though most of the size increase can be negated by serving the CSS file with GZIP encoding.
  • What matters most to you? That people read your content as soon as possible, or that people read your content in your preferred font? I suspect that many of your visitors would prefer the former over the latter.
  • The baseline experience of your site has always been, and will always be, just plain HTML and CSS. Webfonts enhance that experience.
  • That means there are two possibilities you should design for: when webfonts are not available, and when webfonts are available. For that reason, I believe FOUT (flash of unstyled text) should be the default behavior in all browsers.
  • Preloading every font on your site defeats the point of prioritizing one font over another: if everything is important, nothing is.
  • Don’t rely on browser defaults — hiding text from your visitors while webfonts are loading results in a terrible user experience. Always load your fonts asynchronously so they don’t block a page from rendering. In the worst case, your fonts will fail to load and your visitors will see fallback fonts. That’s fine. That’s how the web is supposed to work.
  • Always optimize your webfonts if the license allows it. Using the right font format and subsetting will significantly reduce a font’s file size and make it load faster.
  • Web design and development differ from other disciplines insofar as their environment is relatively uncontrolled.