The WOFF2 file (.woff2)

A WOFF2 file is a font, packaged for the web. Inside is an ordinary TrueType or OpenType font, the same kind you would install on a computer, compressed so that a browser can download it quickly when a page asks for it. Once the browser has unpacked it, the font is used exactly like the original: same letters, same spacing, same features.

It is the format to use for custom fonts on a website today. Every current browser supports it, and it is usually the smallest of the font formats. Google Fonts and most other web font services deliver WOFF2 to current browsers.

A few things it is not:

• Not a different font design. Converting a TTF or OTF to WOFF2 and back gives you a working font with the same glyphs and metrics. Only the packaging changes.
• Not something you double-click. Browsers don't display font files on their own, and Windows and macOS don't install WOFF2 directly. To use the font in desktop apps, convert it to TTF or OTF first, if its licence allows.
• Not a new licence. A WOFF2 file is as protected, or as free, as the font it came from. The format adds no copy protection.

A desktop font is a collection of tables, each with a four-letter name: cmap maps characters to glyphs, glyf or CFF holds the outlines, hmtx the widths, name the font's names and licence, and so on. WOFF2 keeps all of them but stores them more compactly, in three steps:

1. 1A shorter directory. Common table names are stored as a 6-bit number instead of four letters, and lengths use a variable-length number format, so small tables take two bytes to describe.
2. 2Transforms. The glyf table is reorganised so that similar data sits together: all contour counts, then all point counts, then all flags, then all coordinates. Compressors find repeating patterns more easily that way. The loca table is dropped and recomputed, and the hmtx table can optionally drop side bearings that can be worked out from the outlines.
3. 3Brotli compression. Everything is compressed as one stream with Brotli, a compression format published by Google (RFC 7932), which has a built-in dictionary and handles small files well.

The W3C's evaluation, made while the format was designed, measured median savings over WOFF 1.0 of about 24 to 27% for TrueType fonts and about 13% for fonts with CFF outlines. Against the uncompressed desktop font the saving is bigger still, as our own samples show:

A web page uses a font file through a CSS @font-face rule, which gives the font a name and says where to download it. Each weight and style is its own file and its own rule, joined by the shared font-family name:

@font-face {
  font-family: "99helpers Sample";
  src: url("/fonts/sample-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "99helpers Sample";
  src: url("/fonts/sample-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "99helpers Sample", system-ui, sans-serif;
}

• format("woff2") tells the browser what the file is before it downloads it. A browser that can't read a format skips that source and tries the next one in the list.
• Do you still need a WOFF fallback? Only for very old browsers. Every current browser reads WOFF2, so most sites now list WOFF2 alone. Older guides add WOFF, TTF and an EOT file for Internet Explorer; that is no longer needed.
• font-weight and font-style must match the file. If you declare only a regular file and use bold text, the browser fakes bold by thickening the letters, which looks smudged.
• font-display controls what visitors see while the font downloads (see below).

Fonts are only requested once the browser finds text that needs them, which happens late, after the CSS has loaded. For the one or two fonts used above the fold, a preload hint starts the download straight away. The crossorigin attribute is required even for fonts on your own site, because browsers always fetch fonts in CORS mode:

<link rel="preload" href="/fonts/sample-regular.woff2"
      as="font" type="font/woff2" crossorigin>

• Blocked by CORS. The font is on a different domain from the page (a CDN, a separate storage bucket) and that server doesn't send an Access-Control-Allow-Origin header. The CSS Fonts specification requires browsers to fetch fonts in CORS mode, so the request fails and the console shows a CORS error. Fix it on the server that hosts the font, or host the font on the same site as the page.
• Wrong path. URLs inside a CSS file are relative to the CSS file, not to the page. url(fonts/x.woff2) in /css/style.css points to /css/fonts/x.woff2.
• Wrong MIME type. Browsers detect the format from the file's bytes, so a generic type such as application/octet-stream usually still works. font/woff2 is the correct one, and audit tools flag the others.
• A file that isn't really WOFF2. A file renamed from .ttf to .woff2 has the wrong signature and is rejected, or works only by accident. Check the first four bytes: they must be wOF2.
• Invisible text, then a sudden swap. That is the browser waiting for the font: invisible text is called FOIT (flash of invisible text), a visible fallback that changes later is FOUT (flash of unstyled text). font-display decides which you get.
• Rejected as invalid. Chrome and Firefox run every web font through the OpenType Sanitizer before use, and drop fonts with broken tables that a desktop app might tolerate. The browser console says so.

Most of a font's size is its glyphs, and most pages only need a fraction of them. Subsetting removes the glyphs you don't need. A font that covers Latin, Greek and Cyrillic can be split so that an English page downloads only the Latin part. Our sample-digits-subset.woff2 keeps just the digits and a few punctuation marks: 1,400 bytes instead of 4,428.

• Make a subset with pyftsubset from fontTools: pyftsubset font.ttf --unicodes="U+0000-00FF" --flavor=woff2 --output-file=font-latin.woff2. Google's glyphhanger and online tools do the same.
• Load subsets on demand with the unicode-range descriptor: several @font-face rules share one family name, each with its own file and range, and the browser only downloads files whose range covers characters actually on the page. Google Fonts serves its fonts this way.
• Check the licence first. Subsetting modifies the font. Open-source licences such as the SIL Open Font License allow it; some commercial licences don't, and the OS/2 table's fsType field can carry a no-subsetting flag.

A variable font holds a whole range of styles in one file. Instead of separate files for light, regular and bold, it stores one set of outlines plus instructions for how each point moves along an axis such as weight (wght) or width (wdth). Variable fonts were added to OpenType in version 1.8 (2016), and WOFF2 compresses them like any other font.

@font-face {
  font-family: "99helpers Sample Variable";
  src: url("/fonts/sample-variable.woff2") format("woff2");
  font-weight: 300 700; /* the range the wght axis covers */
}

h1 { font-weight: 650; } /* any value in the range works */

Our sample-variable.woff2 covers weights 300 to 700 in 9,236 bytes, against 8,832 bytes for the separate regular and bold files together, and it can produce every weight in between. Older articles use format("woff2-variations"); current browsers accept plain format("woff2") for variable fonts.

• See what it looks like: load it in a page with @font-face, or open it in a font editor such as FontForge. The live specimen on this page does exactly that with our sample.
• Install it on your computer: convert it to TTF or OTF first. Windows and macOS install desktop fonts, not web fonts.
• Convert TTF or OTF to WOFF2: Google's command-line tool woff2_compress font.ttf, or in Python with fontTools: TTFont('font.ttf'), set font.flavor = 'woff2', then save. fontTools needs the brotli package for this.
• Convert WOFF2 back: woff2_decompress font.woff2 writes the decoded font as font.ttf, and fontTools does the same when you set flavor to None and save.
• Inspect it: ttx -l font.woff2 lists the tables; ttx font.woff2 dumps everything as XML.

A font file is software, and fonts are licensed like software. Commercial foundries sell separate licences for desktop use, web use (often priced by page views), apps and e-books. Inside the font, the name table usually carries the copyright and licence, and the OS/2 table has an fsType field with embedding permissions such as installable, editable, preview and print, or restricted. Browsers generally don't enforce fsType; the licence is what counts.

WOFF2 doesn't encrypt anything. Anyone who visits a page can save its fonts from the browser's network panel and decompress them. That is why web font licences rely on contracts rather than technical protection.

Fonts are complex binary formats, and font parsers have had serious security bugs over the years. Chrome and Firefox guard against this by checking every web font with the OpenType Sanitizer before handing it to a font engine. A WOFF2 file can't run code, and the risk from a downloaded font is in bugs, not in a feature of the format.