countering the confusion of consumer packaged goods

fallback fonts

When specifying fonts on a website, it’s possible that the person who’s viewing the site won’t have one of the fonts that you’d like to use.

That might happen because:

  • the font is hosted externally, and they don’t have a good internet connection or are viewing your site offline
  • their browser blocks the font from downloading for some reason
  • they’re using a browser that doesn’t support custom fonts

To make the best of this situation, you can specify multiple fonts in your CSS. So rather than just specifying “Helvetica Neue”, you might specify:

"Helvetica Neue", Helvetica, Arial, sans-serif

If the user has the “Helvetica Neue” font available, that will be used; if not, it’ll try to use Helvetica; if that doesn’t work, it will try Arial; and if the user doesn’t have any of those fonts, it’ll fall back to using whatever sans-serif font is available.

Category: Digital
Also known as: font stack
See also: