Licenses

TTF vs OTF vs WOFF vs WOFF2: Which Font Format Do You Need?

· 5 min read

You have a font and the wrong extension on the end of it. Word wants one thing, your website wants another, and the first ten search results all offer to convert between them in one second. Some of those conversions are trivial and lossless. One of them is not a conversion at all, and the sites offering it instantly are usually renaming your file.

This is the short version: TTF and OTF are two ways of drawing letters. WOFF and WOFF2 are two ways of wrapping either of them for the web. Understanding that one sentence answers almost every question people have about font formats.

They are all the same thing underneath

A font file is a bag of tables. One table holds the outlines, another holds the widths, another maps characters to glyphs, another holds the family name, another holds the kerning. The container is called an sfnt, and all four of these formats are sfnts.

  • TTF — an sfnt whose outlines live in a table called glyf, drawn with quadratic curves. This is what almost every font on this site is, and what Google Fonts hands you.
  • OTF — an sfnt whose outlines live in a table called CFF, drawn with cubic curves. Common in fonts that came out of Adobe tools. Its first four bytes spell OTTO.
  • WOFF — a TTF or an OTF, table by table, each squeezed with zlib and wrapped in a small header. Made for the web in 2009.
  • WOFF2 — the same idea with Brotli compression and a smarter transform for the outline table. Roughly 30% smaller than WOFF, and about 60% smaller than the TTF it came from.

Which one do you actually need?

For a website: WOFF2, and only WOFF2

Every browser still receiving security updates reads WOFF2. It has been supported in Chrome, Firefox, Safari and Edge since 2016, which means the visitor who cannot read it is running something with much bigger problems than your typography. Adding a WOFF fallback made sense in 2018 and is now a second file almost nobody downloads. Every font page here carries a WOFF2 button for exactly this — see Inter or JetBrains Mono.

To install on your computer: TTF or OTF

Windows and macOS both install either without complaint, and so do Illustrator, InDesign, Word and Photoshop. None of them will open a WOFF or a WOFF2 — those are web formats and the operating system has no reason to know about them. If a font you found will not install, check whether you downloaded the web version of it.

For Canva, Figma and the browser-based tools: TTF

These accept TTF and OTF uploads and nothing else. Canva in particular is fussy about variable fonts and will often show you only one weight from a file that contains nine — that is a separate problem, covered in the variable font post.

The conversions that are safe

Anything that only changes the wrapping is lossless in both directions. Unpacking a WOFF gives back the exact TTF that went into it — every byte, hinting included. Packing a TTF as WOFF2 keeps every glyph, every kerning pair and every name, and just makes the file smaller.

All of them run in your own browser on this site’s converter, which matters more than it sounds: every other converter uploads your font to a server you have never heard of, and a licensed font is not yours to hand around.

The conversion that is not safe: TTF to OTF

This is where the confusion costs people real work. TTF and OTF are not two wrappings of one thing. They hold their outlines in different kinds of curve — quadratic in a TTF, cubic in an OTF — so converting between them means redrawing every letter in the font.

Cubic to quadratic can be approximated closely but never matched exactly. The hinting — the instructions that tell the shapes how to behave at small sizes on a screen — does not survive at all. What comes out is a different font that looks similar, and at 12 pixels it will not look similar.

The sites that offer this in one second are mostly changing the extension. What you get has .otf on the end, TTF innards, and the first program you open it in tells you the file is damaged. That is why this site refuses to offer it rather than doing it badly.

What about EOT and SVG fonts?

You will still find "bulletproof @font-face" snippets listing five formats. EOT existed only for Internet Explorer, which Microsoft stopped supporting in 2022. SVG fonts were removed from every browser years ago. Serving either today means uploading files nothing will ever request. Delete them from your CSS.

The short answer

  1. Putting a font on a website: WOFF2.
  2. Installing it on a computer, or uploading to Canva or Figma: TTF.
  3. Converting between the web formats and the desktop ones: safe, lossless, do it freely.
  4. Converting TTF to OTF or back: not a format change. Find another way.

Questions

Is WOFF2 better than TTF?
For a website, yes — it is the same font packed about 60% smaller, and every current browser reads it. For installing on a computer it is useless: operating systems and design software do not open WOFF2 at all. They are for different jobs rather than better and worse.
Can I convert TTF to OTF?
Not without redrawing the font. TTF and OTF store their outlines in different kinds of curve, so the conversion approximates every letter and loses the hinting entirely. Tools that offer it instantly are usually just renaming the file, which produces something no font program will open. If a program is refusing your font, the fix is almost always something else.
Do I still need a WOFF fallback alongside WOFF2?
No. WOFF2 has been supported by every major browser since 2016. A WOFF fallback is a second file that essentially nobody downloads, and it makes your CSS longer for no benefit.
How do I know what format a font file really is?
Not from the extension, which is frequently wrong. The first four bytes of the file say what it is: 00 01 00 00 for a TTF, "OTTO" for an OTF, "wOFF" for a WOFF and "wOF2" for a WOFF2. The converter on this site reads those bytes rather than the file name and tells you what you actually have.

Fonts in this post

  • Inter

    Sans-serif · Rasmus Andersson · Variable

  • JetBrains Mono

    Monospace · Philipp Nurullin, Konstantin Bulenkov · Variable

  • Lora

    Serif · Cyreal · Variable