Which font format should you use?

Font downloads often include a small collection of files: .ttf, .otf, .woff, and .woff2, perhaps with old .eot or .svg versions as well. You usually do not need all of them.

The useful distinction is between fonts intended for desktop installation and compressed formats made for delivery over the web.

TTF and OTF are desktop font formats

TrueType (.ttf) was developed by Apple and adopted by Microsoft. It describes the glyph outlines and includes the information a system needs to render the typeface on screen or in print.

OpenType (.otf) was developed by Microsoft and Adobe, building on TrueType and PostScript font technology. It supports Unicode and can contain large character sets plus typographic features such as ligatures, alternate characters, small capitals, and different numeral styles. Application support for individual OpenType features varies.

The file extension alone does not tell the complete story: OpenType fonts can use either TrueType or PostScript-style outlines. For normal desktop use, install the version supplied and recommended by the type designer. OTF is often the useful choice when you need its broader typographic features, but TTF is not automatically a lower-quality font.

WOFF and WOFF2 are for websites

WOFF packages OpenType or TrueType font data in a format designed for web delivery. It adds compression and can include metadata such as licensing information without changing how the font renders.

WOFF2 improves the compression, using Brotli, and became a W3C Recommendation in 2018. Its files are commonly smaller than equivalent WOFF files, which means less data to download before text can use the web font.

A simple modern @font-face rule can use WOFF2 first and WOFF as a fallback:

@font-face {
  font-family: "Example Sans";
  src:
    url("/fonts/example-sans.woff2") format("woff2"),
    url("/fonts/example-sans.woff") format("woff");
  font-display: swap;
}

Always check the font’s licence before converting or self-hosting it. A font file being downloadable does not mean you are allowed to republish it.

EOT and SVG fonts are legacy formats

Embedded OpenType (.eot) was a proprietary Microsoft format supported by Internet Explorer. It used compression, subsetting, and other measures intended to discourage copying. Edge did not adopt it, and modern sites do not need it unless they still support old Internet Explorer versions.

SVG is a general vector graphics format, but an older SVG font format was also used for web fonts. That font format should not be confused with ordinary SVG images, which modern browsers still support. SVG fonts are another compatibility fallback for browsers that now belong in history rather than a new project.

What I would use

For a modern website, start with WOFF2. Add WOFF only if the browsers you support require it. Serving TTF, EOT, and SVG versions “just in case” adds code and files without helping most readers.

For desktop design work, use the OTF or TTF package intended for installation. The web version is compressed for a different job. As with most asset decisions, the smallest set that covers your actual users is better than carrying every format the download happened to include.