When starting a web project (especially from scratch), a font is one of the questions that can spill the project into red relatively fast.

Understand the Typography evokes emotions and as such it effects how people perceive, relate, trust and make buying decisions about the product, company or service.

As a developer you take care about performance, cross platform support and technical accessibility.

  1. First, identify the typeface—and specific font styles—you need to implement (ask your designer if in doubt 😆).
  2. Deliver. Start with web-safe fonts, fonts already existing in your UI toolkit/CSS framework) and fonts hosted on common font hosting platforms such as Google Fonts, Adobe Fonts, Monotype

If dependence on, or access to a 3rd party provider is a concern, self-host your fonts for total control.

High level points:

  • You need a license to self-host a downloaded type.
  • There are many font file formats (svg, otf, ttf, woff, woff2).
  • Modern web format is woff (Web Open Font Format) with ~97% browser support. Version 2 is using Brotli compression and is ~20% - 50% more efficient.

Cool links:

Sandbox Tests:

Enjoy selecting, managing and deploying fonts faster.
It used to be much harder..