--- title: "What Is WOFF2? WOFF vs WOFF2 and How to Use It" description: "What WOFF2 is, how much smaller it is than WOFF, browser support, how to convert and subset fonts to WOFF2, how to serve and preload it, and what bseoa checks." image: "https://www.blackseoanalyzer.com/static/images/black-seo-analyzer-og-image.png" canonical: "https://www.blackseoanalyzer.com/en/blog/what-is-woff2" language: "en" --- # WOFF2 Explained: WOFF vs WOFF2, Compression, and crossorigin By [Seth Black](https://www.blackseoanalyzer.com/en/about) · Published November 01, 2026 WOFF2 (Web Open Font Format 2.0) is a compressed font file format made for the web. It wraps the same TrueType or OpenType font data as a `.ttf` or `.otf` file, compressed with Brotli after a font-specific preprocessing step, so the same font downloads faster. Every modern browser supports it, and for most sites it’s the only font format you need to serve. ## What is WOFF2, exactly? WOFF2 is a W3C Recommendation; the current version of the [WOFF 2.0 specification](https://www.w3.org/TR/WOFF2/) is dated 8 August 2024. Two things make it smaller than its predecessor: - **Preprocessing.** Before compressing, it transforms the font’s tables. The `glyf` table, which holds glyph outlines, is split into separate streams that group similar data together, and the `loca` table is rebuilt from it on decode rather than stored. - **Brotli.** The spec uses Brotli for both the font data and the metadata block. WOFF 1.0 used zlib (the same compression as gzip). The MIME type is `font/woff2` and the file extension is `.woff2`. ## WOFF vs WOFF2: what’s the difference? | | WOFF (1.0) | WOFF2 | | --- | --- | --- | | Compression | zlib (Flate) per table | Font-aware preprocessing plus Brotli | | Size vs WOFF 1.0 | Baseline | About 25% smaller on average | | Browser support | All browsers, including IE9 to IE11 | All modern browsers | | MIME type | `font/woff` | `font/woff2` | | Use today | Only as a fallback for very old browsers | Default | The size figure comes from the W3C’s [WOFF 2.0 evaluation report](https://www.w3.org/TR/WOFF20ER/), which compressed the Google Fonts collection both ways: WOFF2 was 25.11% smaller than WOFF 1.0 on average, with a range of 11.93% to 55.32% depending on the font. Google’s web.dev guide to [reducing web font size](https://web.dev/articles/reduce-webfont-size) puts it as “up to 30% better compression than WOFF”. ## Does WOFF2 matter for SEO? Fonts don’t rank. What they do is sit on the critical path: text that uses a web font can’t render in that font until the file arrives. Smaller fonts mean less time with invisible or swapping text, which shows up in Largest Contentful Paint when the largest element is a heading or paragraph, and in layout shift when the fallback font has different metrics. If you’re working through those metrics, [how to diagnose Core Web Vitals failures at the page level](https://www.blackseoanalyzer.com/en/blog/how-to-diagnose-core-web-vitals-failures-at-the-page-level) covers where fonts fit in. Font format is also one line on the [pre-deployment SEO checklist for developers](https://www.blackseoanalyzer.com/en/blog/the-pre-deployment-seo-checklist-for-developers), which is the right place to catch it before a redesign ships. ## How do you use WOFF2? Serve WOFF2 in your `@font-face` rule. For nearly every site in 2026, one source is enough: ```css @font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } ``` If you genuinely need Internet Explorer 11, list WOFF2 first and WOFF second; browsers use the first format they support: ```css src: url("/fonts/inter.woff2") format("woff2"), url("/fonts/inter.woff") format("woff"); ``` For the one or two fonts the first screen needs, preload them, with `crossorigin`: ```html ``` Leave out `crossorigin` and, as web.dev’s [preload guide](https://web.dev/articles/preload-critical-assets) puts it, the font will be “fetched twice”, because fonts are always fetched in CORS mode and a preload without the attribute doesn’t match the real request. That’s its own warning, [font crossorigin](https://www.blackseoanalyzer.com/en/technical-seo/performance-analyzer/font-crossorigin). ## How do you convert a font to WOFF2? With Google’s reference encoder ([google/woff2](https://github.com/google/woff2)): ```bash woff2_compress Inter-Regular.ttf # writes Inter-Regular.woff2 woff2_decompress Inter-Regular.woff2 # back to .ttf ``` With fontTools, which also lets you subset to the characters you use, often a bigger saving than the format change itself: ```bash pip install fonttools brotli pyftsubset Inter-Regular.ttf \ --unicodes="U+0000-00FF,U+2013-2014,U+2018-201D,U+2026" \ --layout-features="*" \ --flavor=woff2 \ --output-file=Inter-Regular-latin.woff2 ``` Check the license first. Some commercial fonts don’t permit conversion or self-hosting. ## How should the server send WOFF2? Older nginx `mime.types` files have no entry for WOFF2, so check yours for this line inside its `types` block and add it if it’s missing. Don’t put a separate `types` block in your server config; it replaces the whole inherited list. ```nginx # in /etc/nginx/mime.types font/woff2 woff2; ``` ```nginx location ~* \.woff2$ { add_header Cache-Control "public, max-age=31536000, immutable" always; } ``` Two notes. Don’t add gzip or Brotli compression on top: WOFF2 is already Brotli-compressed, so a second pass costs CPU and saves next to nothing. And if fonts are served from a different origin (a CDN hostname), that origin must send `Access-Control-Allow-Origin`, or the browser refuses to use the font. ## What does bseoa check? bseoa looks at the fonts a page preloads (``). If a preloaded font’s URL doesn’t end in `.woff2`, it reports [font not in WOFF2](https://www.blackseoanalyzer.com/en/technical-seo/web-vitals-analyzer/font-not-woff2) and [font format](https://www.blackseoanalyzer.com/en/technical-seo/performance-analyzer/font-format); query strings like `font.woff2?v=3` are handled correctly. It also flags a preload without `crossorigin`. It doesn’t open your CSS files to read `@font-face` rules, so fonts that are only referenced from CSS aren’t checked; open DevTools, filter the Network panel to Font, and look at the Type column for those. To run those checks across every page of your site, the [bseoa free trial](https://www.blackseoanalyzer.com/en/free-trial) runs for 14 days with every feature. ## Quick answers **Is WOFF2 supported everywhere?** In every current browser, yes. Internet Explorer never supported it. **Is WOFF2 lossy?** No. Decompressing gives back a font that renders identically. **Should I still ship TTF or EOT?** No. EOT was for old Internet Explorer and TTF is uncompressed. WOFF2, with WOFF only if you must support IE11. **What about variable fonts?** They work in WOFF2, and one variable WOFF2 file often replaces four or five static weights. -Sethers About the author [Seth Black](https://www.blackseoanalyzer.com/en/about) Seth is a software engineer and engineering leader who builds bseoa, a Rust-based technical SEO crawler with a GUI and CLI. He writes about the crawling, rendering and indexing problems he runs into on real sites. [LinkedIn](https://www.linkedin.com/in/seth-black-tx/) · [GitHub](https://github.com/sethblack) · [YouTube](https://www.youtube.com/@SethBlack) [Back to Blog](https://www.blackseoanalyzer.com/en/blog) ## Discover hundreds of SEO Issues in Seconds Without Monthly Subscriptions Comprehensive technical SEO analysis powered by ML and 16 specialized modules. Optional AI-powered insights from Claude, GPT-4, or Gemini. Get actionable insights in seconds, and never pay monthly fees again. [Download Free Trial](https://www.blackseoanalyzer.com/en/free-trial) I use AI to generate images for my posts and for general editing, updates, and ironically SEO purposes. I used to draw all of the images for my personal blog (taleas) myself, but as the volume of content I produce has increased, I've turned to AI tools to help create visuals that complement my writing. I go out of my way to generate images that look strange, and don't represent real people. If you ever want to chat about my use of AI, please reach out. ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.blackseoanalyzer.com/#organization","name":"Fiscus Technology, LLC","url":"https://www.blackseoanalyzer.com/","logo":{"@type":"ImageObject","url":"https://www.blackseoanalyzer.com/static/images/black-seo-analyzer.png"},"sameAs":["https://sethserver.com/","https://github.com/sethblack"],"founder":{"@id":"https://www.blackseoanalyzer.com/#seth"}},{"@type":"WebSite","@id":"https://www.blackseoanalyzer.com/#website","name":"bseoa","url":"https://www.blackseoanalyzer.com/","publisher":{"@id":"https://www.blackseoanalyzer.com/#organization"}},{"@type":"Person","@id":"https://www.blackseoanalyzer.com/#seth","name":"Seth Black","url":"https://www.blackseoanalyzer.com/about","jobTitle":"Creator of bseoa","sameAs":["https://www.linkedin.com/in/seth-black-tx/","https://github.com/sethblack","https://www.youtube.com/@SethBlack","https://sethserver.com/"]},{"@type":"BlogPosting","@id":"https://www.blackseoanalyzer.com/en/blog/what-is-woff2#article","headline":"WOFF2 Explained: WOFF vs WOFF2, Compression, and crossorigin","name":"WOFF2 Explained: WOFF vs WOFF2, Compression, and crossorigin","description":"What WOFF2 is, how much smaller it is than WOFF, browser support, how to convert and subset fonts to WOFF2, how to serve and preload it, and what bseoa checks.","url":"https://www.blackseoanalyzer.com/en/blog/what-is-woff2","datePublished":"2026-11-01T05:21:24","dateModified":"2026-11-01T05:21:24","author":{"@id":"https://www.blackseoanalyzer.com/#seth"},"publisher":{"@id":"https://www.blackseoanalyzer.com/#organization"},"image":{"@type":"ImageObject","url":"https://www.blackseoanalyzer.com/static/images/black-seo-analyzer-og-image.png","width":1200,"height":630},"mainEntityOfPage":{"@type":"WebPage","@id":"https://www.blackseoanalyzer.com/en/blog/what-is-woff2"},"isPartOf":{"@id":"https://www.blackseoanalyzer.com/#website"},"inLanguage":"en-US","isAccessibleForFree":true,"wordCount":927},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.blackseoanalyzer.com/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://www.blackseoanalyzer.com/en/blog"},{"@type":"ListItem","position":3,"name":"WOFF2 Explained: WOFF vs WOFF2, Compression, and crossorigin","item":"https://www.blackseoanalyzer.com/en/blog/what-is-woff2"}]}]} ```