Font File Formats Explained: TTF vs OTF vs WOFF vs WOFF2

Font file formats decide more than which icon shows up next to a file on your desktop — they decide whether a typeface installs cleanly, renders crisply on screen, ships inside your app, or loads fast on a slow phone. The four you will meet most often are TTF, OTF, WOFF and WOFF2, and they fall into two camps: formats for installing and designing (TTF, OTF) and formats for serving fonts on the web (WOFF, WOFF2). This guide is the canonical reference for what each format is, how they differ technically, and exactly which one to reach for in 2026.

If you take one thing away: install OTF or TTF on your machine, and serve WOFF2 on your website. The rest of this page explains why, and covers the edge cases — variable fonts, legacy formats, color fonts — that the short answer skips.

The Two Families: Outline Technology vs Container

Most font-format confusion comes from mixing up two different things: the outline technology that describes the letter shapes, and the container that wraps that data for a particular use.

There are two outline technologies in widespread use:

TrueType — outlines built from quadratic Bézier curves. Created by Apple in the late 1980s, adopted everywhere. Hinting (instructions that snap shapes to the pixel grid) is detailed and powerful.
PostScript / CFF — outlines built from cubic Bézier curves, the technology behind Type 1 and now OpenType-CFF. Cubic curves describe complex shapes with fewer points, which type designers tend to prefer.

And the containers that hold them:

.ttf and .otf — desktop/installable containers (both are technically OpenType files; more on that below).
.woff and .woff2 — web containers, which are simply compressed wrappers around the same outline data, optimized for download.

Once you see that WOFF and WOFF2 are just compressed packaging for TTF/OTF data, the whole landscape gets simpler. Let’s take each format in turn.

TTF — TrueType Font

TTF (.ttf) is the classic TrueType format. It carries TrueType (quadratic) outlines and is supported by virtually every operating system and application going back decades. It is the safest “it will just work” desktop format, especially on Windows, where TrueType hinting historically produced very clean rendering on low-resolution screens.

TTF is also the base format for many Google Fonts downloads and for most variable fonts, which are built on the TrueType outline model. When you download a family from Google Fonts to install locally, you typically get TTF files.

Use TTF when: you are installing a font on a computer (especially Windows), you need maximum compatibility with older software, or you are working with a variable font that ships as TTF. To install one, follow our step-by-steps for installing fonts on Mac and installing fonts on Windows.

OTF — OpenType Font

OTF (.otf) is the OpenType format most people mean when they say “OpenType.” In practice, an .otf file usually carries PostScript/CFF outlines (cubic curves), which is why type designers and foundries tend to release retail fonts as OTF — the cubic outline model matches how they draw.

The genuinely important point: OTF and TTF are both OpenType. OpenType is the umbrella specification (jointly developed by Microsoft and Adobe), and it allows either TrueType or PostScript outlines inside the same overall format. The file extension signals which outline flavor is inside — but both support the full OpenType feature set: ligatures, small caps, stylistic alternates, tabular figures, kerning, and language support via the same GSUB/GPOS tables.

So OTF is not “more advanced” than TTF in features. The practical differences are: OTF (CFF) files are often slightly smaller for the same design; OTF is the typical retail/foundry format; and TTF has the edge in legacy compatibility and is the basis for most variable fonts.

Use OTF when: you bought a font from a foundry (it probably came as OTF), you are doing print or brand design, or you want the foundry’s intended, fully-featured desktop file.

TTF vs OTF: which should you install?

	TTF	OTF
Outline type	TrueType (quadratic)	PostScript/CFF (cubic)
Both are OpenType?	Yes	Yes
OpenType features	Full support	Full support
Typical source	Google Fonts, system fonts, variable fonts	Retail foundries, Adobe
Best for	Max compatibility, Windows, variable fonts	Print/brand work, retail families
File size	Slightly larger	Often slightly smaller

The honest answer for most designers: if you have both, install whichever your foundry recommends — usually OTF for retail families, TTF for Google Fonts. Either will work. Don’t install both versions of the same family at once; duplicate PostScript names can confuse the OS font menu.

WOFF — Web Open Font Format

WOFF (.woff) is not a new outline technology — it is a wrapper. It takes the exact TTF or OTF data and compresses it (using zlib/DEFLATE), then adds metadata. The goal is purely delivery: a font that downloads smaller and is meant for use in a browser via @font-face, not for installation.

WOFF became a W3C Recommendation in 2012 and is supported by every browser still in meaningful use, including old versions of Internet Explorer (IE9+). For years it was the safe, universal web font format.

Use WOFF when: you need a fallback for genuinely ancient browsers. In 2026 that need is rare — see WOFF2 below — but a WOFF source in your @font-face stack costs little and guarantees coverage.

WOFF2 — The Format You Should Serve in 2026

WOFF2 (.woff2) is the successor to WOFF and the default web font format today. It swaps WOFF’s zlib compression for Brotli, which is dramatically more efficient for font data. In practice WOFF2 files are roughly 30% smaller than WOFF, and far smaller than raw TTF/OTF — which directly improves load time and Core Web Vitals.

WOFF2 is supported by every modern browser: Chrome, Edge, Firefox, Safari, and all current mobile browsers. The only browsers that don’t support it are ones effectively no one uses anymore (legacy IE). For a deeper comparison of the two web formats and a real-world serving strategy, see WOFF2 vs WOFF: what to serve in 2026.

Use WOFF2 when: always, for web. It should be the first (and usually only) format in your @font-face src list.

A modern @font-face stack

You no longer need the old “bulletproof” five-format stack. In 2026, this is enough for self-hosting:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2"),
       url("/fonts/inter.woff")  format("woff");
  font-weight: 100 900;
  font-display: swap;
}

The WOFF2 line serves nearly everyone; the WOFF line is a cheap fallback you can drop entirely if your analytics show no legacy traffic. For the full walkthrough — including hosting, preloading and font-display — see how to add custom fonts to any website.

Variable Fonts and These Formats

A variable font packs an entire family — every weight, width, and optical size — into a single file using interpolation along defined axes. Variable fonts are built on the TrueType outline model and ship as TTF for desktop or, for the web, wrapped as WOFF2 (the format handles variation data well and keeps the single file small).

This is one of WOFF2’s biggest practical wins: a single variable WOFF2 can replace a dozen separate static weight files, cutting both the number of HTTP requests and total bytes. If variable fonts are new to you, read variable fonts explained, and when to use them before you commit a family to production.

The key thing to internalize is that “variable” describes the data inside the file, not a new extension you have to learn. The same install steps, the same @font-face syntax, and the same WOFF2 conversion tools all apply unchanged. The only difference shows up at the point of use: instead of picking from a fixed list of named weights, you request any value along an axis. That continuity is deliberate — the formats you already understand were extended to carry variation data rather than replaced by something incompatible, which is exactly why a variable font drops cleanly into a workflow built for static TTF and OTF files.

Legacy and Specialty Formats

You may still run into these, but you rarely need to create them in 2026:

EOT (.eot) — Embedded OpenType, Microsoft’s old web format for Internet Explorer. Obsolete. Drop it.
SVG fonts (.svg) — an early web format, deprecated and removed from most browsers. Not to be confused with SVG-in-OpenType color fonts.
Type 1 / PostScript (.pfb, .pfm) — the original PostScript fonts from the 1980s–90s. Adobe ended Type 1 support in its apps in 2023; convert any survivors to OpenType.
TTC (.ttc) — TrueType Collection, multiple related fonts in one file (common for system CJK fonts). You install it like a TTF.
Color font formats — OpenType can carry color glyphs via COLR/CPAL, sbix, CBDT or SVG tables (emoji and decorative fonts). These are still .ttf/.otf/.woff2 files; the color data lives inside.

Which Format Should You Use? Quick Reference

Your goal	Use this format
Install on Mac or Windows	OTF or TTF
Print / brand / packaging design	OTF (or TTF) from the foundry
Self-host on a website	WOFF2 (with WOFF fallback if needed)
Embed in a mobile/desktop app	TTF or OTF (check your platform’s SDK)
Ship a whole family in one file	Variable font: TTF (desktop) / WOFF2 (web)
Support a truly ancient browser	WOFF (and only if analytics demand it)

Converting Between Formats

You will eventually need to convert — usually TTF/OTF into WOFF2 for the web. Reliable, free options:

Google’s woff2 command-line tool — the reference encoder; produces the smallest, most correct WOFF2 files. Best for build pipelines.
fontTools (Python) — the fonttools library can read and write all of these formats and is what most font-tooling is built on.
Browser-based converters (e.g. the Transfonter and Font Squirrel generators) — convenient for one-offs and for generating a ready-made @font-face stack.

One caution: only convert and self-host fonts you are licensed to self-host. Converting a desktop-only font to WOFF2 and putting it on a server is a separate web-license question — confirm your EULA before you do it.

Frequently Asked Questions

Is TTF or OTF better?

Neither is universally better — both are OpenType and support the same features. Install OTF for retail/print fonts (PostScript outlines, foundry’s intended file) and TTF for maximum compatibility, Windows, or variable fonts. If a download includes both, pick one; don’t install both versions of the same family.

What font format should I use on a website?

Serve WOFF2. It uses Brotli compression, is about 30% smaller than WOFF, and is supported by every modern browser. List it first in your @font-face src, with an optional WOFF fallback only if your analytics still show legacy-browser traffic.

What is the difference between WOFF and WOFF2?

Both wrap the same TTF/OTF outline data for web delivery. WOFF uses older zlib compression; WOFF2 uses Brotli and is roughly 30% smaller, so it loads faster. WOFF2 is the 2026 default; WOFF is now only a legacy fallback.

Can I install a WOFF or WOFF2 file like a normal font?

No. WOFF and WOFF2 are web-delivery formats meant for @font-face in browsers, not for installing on your operating system. To install a font on your computer, use the TTF or OTF version instead.

Are TTF and OTF both OpenType?

Yes. OpenType is an umbrella format that allows either TrueType (quadratic) outlines — typically saved as .ttf — or PostScript/CFF (cubic) outlines — typically saved as .otf. Both extensions support the full OpenType feature set, including ligatures, alternates and kerning.

Font File Formats Explained: TTF, OTF, WOFF & WOFF2