How to using woff for legacy browser and enterprise compatibility
- Step 1Quantify the legacy audience — Check analytics for IE11 / Edge Legacy share. Banking, healthcare, government, and B2B SaaS targeting Fortune 500 procurement often see 3-15% IE11. If you see that profile, a WOFF fallback is justified; if IE11 is under 0.1%, ship WOFF2-only.
- Step 2Generate WOFF from your source font — Run the original TTF/OTF through [TTF to WOFF](/font-tools/ttf-to-woff). Don't transcode an existing WOFF2 to WOFF — that inflates it. The converter wraps the sfnt with per-table zlib, which every WOFF-capable engine reads.
- Step 3Build the ordered multi-format src list — Use the [@font-face Generator](/font-tools/font-face-generator) with WOFF2 and WOFF checked. It emits WOFF2 first (modern engines stop there) and WOFF second (IE11). Skip TTF — no WOFF-incapable browser is in secured use.
- Step 4Set font-display knowing IE11 ignores it — Set `font-display: swap` for the modern majority. IE11 ignores `font-display` entirely and always blocks rendering until the font loads (with a ~3s timeout), so design your fallback text to be acceptable during that block.
- Step 5Serve with the correct MIME and CSP — Serve WOFF as `font/woff` (or legacy `application/font-woff`). If you have a `font-src` CSP directive, include your font origin. Misconfigured MIME or CSP causes silent fallback even when the file is valid.
- Step 6Test in a real legacy engine — BrowserStack or a Windows VM with IE11 is the only reliable proof. Confirm IE11 fetches the WOFF (not the WOFF2), the glyphs render, and the layout holds during the block period before the font loads.
Legacy-environment compatibility matrix
Which font format actually renders in each constrained environment. WOFF is the floor for serious legacy support.
| Environment | WOFF2? | WOFF 1.0? | Recommended |
|---|---|---|---|
| IE11 (enterprise-locked) | No | Yes | WOFF (as src fallback) |
| Edge Legacy ≤18 | Partial / unreliable | Yes | WOFF fallback |
| Embedded WebKit without Brotli | No | Yes | WOFF |
| Old Android stock browser | Mostly no | Yes | WOFF (negligible traffic) |
| IE6-IE8 | No | No | EOT only — usually not worth it |
| Outlook desktop (Word engine) | No @font-face at all | No @font-face at all | System font stack |
IE11 / legacy gotchas to plan around
Behaviours that differ from modern browsers and bite if you don't expect them.
| Behaviour | What IE11 / legacy does | Your mitigation |
|---|---|---|
font-display | Ignored — always block, ~3s timeout, then fallback | Make the fallback text acceptable during the block |
WOFF2 src entry | Skipped if format() hint present; corrupts load if absent | Always include format("woff2") and format("woff") |
| Variable fonts | Not supported at all | Ship a static instance for the legacy tail |
unicode-range subsetting | Supported but quirky in old engines | Test the actual glyph coverage in IE11 |
CSP font-src | Older syntax; blocks silently on mismatch | Verify the header against the real font origin |
IE11 prevalence by vertical (illustrative)
Approximate ranges; measure your own analytics. Global average is ~0.1% but heavily concentrated.
| Vertical | Typical IE11 share | Ship WOFF fallback? |
|---|---|---|
| Consumer e-commerce | < 0.1% | No — WOFF2 only |
| Financial services | 3-5% | Yes |
| Healthcare systems | 2-4% | Yes |
| Government portals | 5-10% | Yes |
| B2B SaaS (Fortune 500 procurement) | 3-8% | Yes |
Cookbook
The deployment patterns for legacy-aware font delivery — generating the WOFF, ordering the src, and proving it in IE11.
The legacy-safe @font-face block
ExampleWOFF2 first for the modern 99%, WOFF second for IE11. No TTF. The format() hints let IE11 skip the WOFF2 cleanly and fetch only the WOFF.
@font-face {
font-family: "Corporate";
font-weight: 400;
font-display: swap; /* honoured by modern, ignored by IE11 */
src: url("/fonts/corporate.woff2") format("woff2"),
url("/fonts/corporate.woff") format("woff");
}Generate the WOFF fallback from source
ExampleConvert the original TTF/OTF — not an existing WOFF2 — so the WOFF is as small as zlib allows. The result panel shows the reduction from the TTF.
Source: Corporate-Regular.ttf (271 KB) → /font-tools/ttf-to-woff → corporate.woff (~162 KB, Saved 40%) → /font-tools/ttf-to-woff2 → corporate.woff2 (~108 KB) Wire both into the @font-face above, WOFF2 first.
Serve with the right MIME type
ExampleAn incorrect or missing MIME can cause silent fallback in stricter engines. Configure your server (or CDN) to send font/woff for .woff files.
# nginx
types {
font/woff2 woff2;
font/woff woff;
}
# Apache
AddType font/woff2 .woff2
AddType font/woff .woffCSP that allows your fonts in locked-down setups
ExampleEnterprise environments often enforce CSP. If you have a font-src directive, it must list your font origin or the font is blocked silently — IE11 then shows the system fallback.
Content-Security-Policy: font-src 'self' https://cdn.example.com; # If you also inline a critical subset as base64 (font-to-base64), # add data: too: Content-Security-Policy: font-src 'self' data: https://cdn.example.com;
Prove it in IE11
ExampleThe only reliable verification. Open the page in a real IE11 engine and confirm it fetched the WOFF, not the WOFF2, and rendered the brand font.
IE11 (BrowserStack) → F12 → Network: corporate.woff 200 162 KB ← fetched (WOFF2 skipped via hint) corporate.woff2 — ← not requested Visual: heading renders in Corporate, not Times New Roman fallback.
Edge cases and what actually happens
Every row below was probed against the live API. Some documented requirements (alphabetical axis order, numerical tuple order) are not actually enforced in practice — useful to know if you've been blaming the wrong thing for a 400.
You ship WOFF2-only and IE11 shows the fallback font
Fallback font shownIE11 can't decode WOFF2 and ignores that src entry. With no WOFF in the list, the element renders in the next CSS font. If your audience includes IE11-locked machines, add a WOFF second src. Generate it from the source TTF/OTF with TTF to WOFF.
font-display: swap has no effect in IE11
By designIE11 doesn't implement font-display — it always blocks text rendering until the font loads, with a roughly 3-second timeout before falling back. Keep font-display: swap for modern engines, but design your fallback so a brief block doesn't break the layout for the IE11 tail.
Outlook desktop won't show your brand font
No workaroundOutlook on Windows renders email through Microsoft Word's HTML engine, which strips every @font-face rule — WOFF, WOFF2, or inline base64, it makes no difference. There is no way to get a webfont into Outlook desktop. Design the email's fallback system font stack so it still reads like itself.
You transcode WOFF2 to WOFF for the fallback
InefficientRe-wrapping an existing WOFF2 as WOFF inflates it (Brotli unwound, recompressed with zlib), so the legacy file is larger than necessary. Always generate the WOFF from the original TTF/OTF source for the smallest fallback. The TTF to WOFF guide explains the size delta.
Variable font with no static fallback for IE11
Renders default onlyIE11 has no variable-font support, so even a variable WOFF renders the default instance — font-variation-settings does nothing. For a legacy audience that needs specific weights, ship static instances (freeze axes with the Variable Font Freezer) wrapped as WOFF, and reserve the variable WOFF2 for modern engines.
Wrong MIME type causes silent fallback
Config issueIf the server sends a generic or wrong content type for .woff, stricter engines may refuse to parse it as a font and quietly fall back — with no console error in some legacy browsers. Configure font/woff (or the legacy application/font-woff) for .woff files at the server or CDN.
CSP font-src blocks the font in locked-down enterprise
Blocked silentlyEnterprise environments often enforce a strict CSP. A font-src directive that omits your font origin blocks the file — modern browsers log a CSP warning, but the visible result is the fallback font. Add your origin (and data: if you inline a critical subset via Font to Base64).
Considering EOT for IE6-IE8
Not worth itIE6-8 are the only browsers that need EOT, and they're below 0.01% globally with no security updates since 2014. Spending payload bytes and build complexity on EOT for that vanishing, unpatched audience isn't justified — let the system font handle it. WOFF is the sensible legacy floor.
Frequently asked questions
Is IE11 still relevant in 2026?
Globally about 0.1%, but heavily concentrated by vertical: financial services 3-5%, healthcare 2-4%, government portals 5-10%, B2B SaaS targeting Fortune 500 procurement 3-8%. If your audience is corporate or public-sector, IE11 support via a WOFF fallback is still a real concern. For consumer sites, it isn't.
Does font-display work in IE11?
No. IE11 ignores font-display entirely and always uses block behaviour — invisible text until the font loads, with a ~3s timeout, then fallback. Set font-display: swap anyway: IE11 ignores it but every modern browser honours it, so you lose nothing. Pick the value with the Font Display Strategy tool.
Should I ship WOFF alone or with WOFF2?
With WOFF2, always — WOFF2 first, WOFF second. Never WOFF alone: the modern 99% would download the larger zlib file for no reason. The fallback pattern serves WOFF2 to capable engines and WOFF only to the legacy tail. See WOFF vs WOFF2: when to ship both.
What about SVG fonts for old WebKit?
SVG Fonts were dropped from every modern browser by ~2018. The only remaining use is some PDF generators. For browser delivery, WOFF is the legacy floor — older than WOFF means deprecated SVG Fonts or EOT (IE6-8). Don't ship SVG fonts for the web.
Should I ship EOT for IE6-IE8?
No. Those browsers are below 0.01% globally and unpatched since 2014. Spending payload and build effort on EOT for that audience isn't worth it — the system font fallback is fine for them. WOFF covers everything from IE9 up.
How do I generate the WOFF fallback?
Convert your original TTF/OTF with the TTF to WOFF tool — it wraps the sfnt with per-table zlib, which every WOFF-capable engine reads. Convert from the source font, not from an existing WOFF2, so the fallback is as small as possible. Then order it after the WOFF2 in your src.
Will WOFF preserve my hinting and OpenType features for IE11 users?
Yes — WOFF is a lossless wrapper, so cmap, outlines, GSUB/GPOS, kern, and the hinting tables (cvt , fpgm, prep) all survive. IE11 users get the same hinting and features as everyone else, just delivered in the WOFF wrapper instead of WOFF2.
Do embedded WebKit views need WOFF?
Often, yes — embedded WebKit builds without Brotli can't decode WOFF2 but read WOFF fine. This shows up in older Android system browsers, some kiosk/POS shells, and legacy native-app web views. A WOFF fallback covers them at no cost to modern users.
Why does my font work in Chrome but not on a locked-down enterprise machine?
Two common causes: the machine runs IE11 (which needs the WOFF fallback you may not have shipped), or a strict corporate CSP blocks the font origin. Check both — add a WOFF src and confirm your font-src directive lists the font's origin. Test in a real IE11 engine to confirm.
Can I inline a critical font for legacy reliability?
You can base64-inline a small critical subset with Font to Base64, but remember to add data: to your CSP font-src, and that IE11's base64 data-URI handling is fine for fonts but still subject to the block-rendering and no-variable-font limits. For most legacy cases an external WOFF fallback is simpler and cacheable.
Does the WOFF need a special MIME type?
Serve it as font/woff (the modern type) or the legacy application/font-woff; both are accepted. A wrong or generic content type can cause silent fallback in stricter engines. Configure your server/CDN explicitly for .woff and .woff2 files.
How do I verify legacy support actually works?
Use BrowserStack or a Windows VM with a genuine IE11 engine — emulation modes lie. Confirm in the Network tab that IE11 fetched the WOFF (not the WOFF2), the brand font renders, and the layout holds during the block period before the font loads.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.