Extension NavigatorFILE EXTENSION LIBRARY
日本語
Home›Fonts›.woff2
THE FILE FIELD GUIDE
.woff2

Web Open Font 2

Fonts

WOFF2 uses font-aware transforms and Brotli compression. Size depends on the font and glyph coverage. Use format(woff2) in CSS and test glyphs, weights and variable axes on target browsers; changing a filename does not create WOFF2.

What it is used for
Efficient webfont delivery
What the file contains
Binary data
All sections, questions and sources

Content reviewed： · Editor：Kai

Opening steps

Choose your environment or purpose to see its steps.

Inspect a supplied font

Compression format and glyph coverage differ.

  1. Inspect provider, license and companion CSS.
  2. Identify regular, bold or variable-font mapping.
  3. Test required text and symbols.
Apply on a web page

Align the font face and element declarations.

  1. Declare its URL and appropriate format.
  2. Match family, weight and style on the element.
  3. Inspect rendered fonts and wrapping at multiple widths.
Diagnose rendering differences

Separate fetch, glyph and variation issues.

  1. Inspect network and console errors.
  2. Inspect CORS or unicode-range where relevant.
  3. Inspect supported variation axes and weight range.

Menu labels and support vary by app, OS and version. Preserve the original before making changes.

Troubleshooting by symptom

  • Replacement fails: confirm real WOFF2 content and matching URL/format hints.
  • Unexpected weight: distinguish static/variable fonts and inspect CSS weight ranges.
  • Missing glyphs after optimization: inspect subset coverage for languages/symbols.
  • Fetched but unused: inspect element family and CSS overrides.
  • Fails after deployment: inspect URL, redirects and CORS.
  • Mobile wrapping differs: compare rendered font, width and font size.

Licensed TTF / OTF → WOFF2

  1. Use the vendor’s webfont when available; verify conversion/subsetting rights.
  2. Encode separately and validate required glyphs, shaping and variable axes.
  3. Generate from an authorized source rather than renaming, then verify rendering.

Decoded font bytes may differ from the original; web licensing does not imply desktop rights.

Compare size and coverage

Compare size with equivalent glyph coverage; a smaller file may contain fewer characters.

Example: test headings, body, bold, digits and punctuation at the same viewport width.

Source for these steps：W3C · WOFF File Format 2.0 / W3C · CSS Fonts Module Level 3

Build a useful font test

Test headings, body, bold, digits and symbols at mobile widths for wrapping, missing glyphs and fallback.

Source for these steps：W3C · WOFF File Format 2.0 / W3C · CSS Fonts Module Level 3

Related-format differences

Related-format differences
Format / methodRoleWhat to verify
WOFF2Webfont compressionGlyphs/weights
SubsetReduced coverageunicode-range
Variable fontAxis-based variationAxes/ranges

Handling and security

Review provenance, licensing and external requests; use updated browsers/font tools.

Questions and answers

Is WOFF2 always smaller?

It depends on the font/glyphs/source; compare actual files.

Can I rename WOFF to WOFF2?

No; the encoding differs.

Can it carry variable fonts?

Yes; also check browser support and CSS settings.

Is every WOFF2 variable?

It can contain fixed fonts; the container does not establish variable axes.

Does compression make glyphs pixelated?

This differs from image resizing; inspect the source font, weight and rendering environment.

Format facts: name, steward and MIME type
Formal name
Web Open Font Format 2.0
Steward / specification
W3C
MIME type
font/woff2

Primary and official sources

  • StandardWOFF File Format 2.0

    Defines WOFF2 compression, font data and media type.

    W3C · Link checked：
  • StandardCSS Fonts Module Level 3

    Defines @font-face and font loading requirements.

    W3C · Link checked：