WOFF2, WOFF, TTF, or OTF: Which Font Format Should You Use?

Short answer: use WOFF2 for websites, and TTF or OTF for installing a font on your computer. WOFF is only worth adding if you must support a browser too old for WOFF2.

The rest of this guide explains what each format is, why WOFF2 wins on the web, and what changes, if anything, when you convert between them.

The four formats at a glance

TTF and OTF: the desktop formats

TTF and OTF files share the same structure. A font file is a set of tables: one maps characters to glyphs, one stores the glyph outlines, one holds names such as the family and the designer, and so on. The OpenType specification describes both.

The main difference is how the outlines are stored:

• TrueType outlines live in the glyf table and use quadratic curves. Files with these outlines usually end in .ttf.
• CFF outlines live in the CFF table and use cubic curves, the same kind used in PostScript. These files usually end in .otf.

The extension is a convention, not a guarantee. Some .otf files contain TrueType outlines. For everyday use the difference rarely matters: operating systems and design apps handle both.

Browsers can load TTF and OTF through @font-face too. The problem is size. Neither format is compressed, so visitors download more data than they need to.

WOFF: a compressed wrapper

WOFF was created specifically for the web and published as a W3C Recommendation. It takes the tables of a TTF or OTF font and compresses each one with zlib, the same compression used in gzip. It can also carry extra metadata, such as license information, that browsers ignore when drawing text.

Inside, it is still the same font. Unpacking a WOFF file gives you back the original tables.

WOFF2: better compression for the web

WOFF2, also a W3C Recommendation, replaces zlib with Brotli and adds preprocessing steps tuned for font data, such as rearranging glyph outlines so they compress better. web.dev’s Best practices for fonts reports that WOFF2 compresses about 30% better than WOFF.

Exact savings depend on the font. When you convert a file with the font converter, it shows the size before and after, so you can see the difference for your own font.

One technical detail is worth knowing. The WOFF2 specification does not promise that a decoded font is a byte-for-byte copy of the original file, but it does require the decoded font to keep the exact functionality of the original. Text renders the same; only the internal byte layout can differ.

Which format should you ship?

For a website, ship WOFF2 alone. Every current major browser supports it (see Can I use: WOFF 2.0), and web.dev’s font guide passes on the advice to use only WOFF2. One format means simpler CSS and no risk of the browser downloading the wrong file.

@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-sans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

If your audience includes a browser without WOFF2 support, add WOFF as a second source. The browser uses the first source it supports, and the format() hint lets it skip the others without downloading them:

@font-face {
  font-family: 'Brand Sans';
  src:
    url('/fonts/brand-sans-regular.woff2') format('woff2'),
    url('/fonts/brand-sans-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Always list WOFF2 first. A browser that supports both formats stops at the first one it can use. The same web.dev article suggests another option for very old browsers: serve them no web font at all and let the fallback font do the job.

What about EOT and SVG fonts?

Older “bulletproof” @font-face snippets also list EOT (used by old versions of Internet Explorer) and SVG fonts (used by early versions of Safari on iOS). No current browser needs either. You can remove them from your CSS.

What happens when you convert

Not every conversion is the same kind of operation.

TTF or OTF to WOFF or WOFF2 is packaging. The font tables are compressed into a web format; the outlines, kerning, ligatures, and other features stay. This is the conversion most websites need, and the TTF to WOFF2 and OTF to WOFF2 pages are set up for it.

WOFF or WOFF2 to TTF or OTF is unpacking. You get a regular desktop font back, which is useful when you only have the web files and need to install the font or use it in a design app. Check that your license allows desktop use first; web and desktop use are sometimes licensed separately.

TTF to OTF, or OTF to TTF, is different: the outlines have to be rebuilt in the other format.

• Converting quadratic TrueType curves to cubic CFF curves can be done exactly, because every quadratic curve can be written as a cubic one.
• Converting cubic CFF curves to quadratic TrueType curves needs an approximation, so shapes can change very slightly.
• Hinting, the extra instructions that help small text render crisply on some screens, is written for one outline format and does not carry over directly to the other.

When FontPivot’s converter rebuilds the outlines, it copies the rest of the original font back afterwards: the names and license text, the line spacing, and the OpenType features such as ligatures and small caps. The hinting is the one thing it cannot keep, and it says so before you convert. It does not convert variable fonts between TTF and OTF at all, because rebuilding their outlines would lose every axis; use WOFF2, or fix one style first with the variable font instancer.

So keep your original file, and only convert between the two desktop formats when an app really requires a specific one.

Common situations

“I have a TTF or OTF and want to use it on my website.” Convert it to WOFF2 and keep the original. The web font kit from the converter or the font viewer, which is the same in both, includes the WOFF2 file and an @font-face rule to start from. How to self-host a custom font walks through the rest.

“I only have WOFF2 files and need the font in a design app.” Most desktop apps want TTF or OTF. Convert the WOFF2 file to whichever one the app accepts, and check that your license covers desktop use.

“I’m not sure what format this file really is.” File names can be wrong. Open it in the font viewer: it reads the format from the file’s contents, along with the name, weight, version, and the characters it includes.

“I have a .ttc file.” That is a font collection: several fonts in one file, common for system fonts. Add it to the font converter, which lists the fonts inside and lets you pick the ones to convert, each as a separate file.

“Do I still need WOFF?” Only if your analytics or support requirements include browsers that lack WOFF2. If you are not sure, start with WOFF2 only and check Can I use for the browsers you care about.

Summary

• Websites: WOFF2, on its own in most cases.
• Very old browsers: add WOFF as a second src, or let them use a fallback font.
• Your computer and design apps: TTF or OTF.
• Packaging into WOFF or WOFF2 keeps the font’s behavior. Converting between TTF and OTF rebuilds the outlines, so keep the original.

Further reading

• W3C: WOFF File Format 2.0 and WOFF File Format 1.0
• MDN: src descriptor
• web.dev: Reduce web font size
• Microsoft: OpenType font file