How to embed custom fonts in html email templates
- Step 1Subset to bare essentials — Email weight matters: subset your brand font to the exact characters used in the template (typically Latin Basic + numerals + a few punctuation marks). 1.5–3 KB after WOFF2 + base64 is achievable.
- Step 2Encode and inline — Run the WOFF2 through the JAD Base64 encoder. Drop the @font-face block in a <style> tag inside the email's <head>. Use the inlined font in inline style attributes for client compatibility.
- Step 3Provide a system fallback — Always include a fallback stack: font-family: "YourBrand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif. Outlook on Windows desktop strips the @font-face entirely; the fallback is what those readers see.
Frequently asked questions
Why doesn't Outlook on Windows render the font?+
Outlook on Windows uses Word's HTML rendering engine, which strips @font-face declarations entirely. Workaround: use VML conditional comments or accept that Outlook desktop users see your fallback. Most other clients render the inlined font correctly.
What's the size budget for email fonts?+
Most providers cap emails at 100–200 KB before clipping. After base64 inflation, plan on 5–10 KB per font weight. Always subset aggressively — full Latin coverage is usually overkill for short email copy.
Should I include WOFF and TTF fallbacks?+
Inline only WOFF2. TTF and WOFF data URIs are 33% larger than the binary; multiplying that by 2–3 fallback formats explodes email size. Modern email clients all support WOFF2.
Can I track font loads in email?+
No — even if you could load fonts from a CDN, most email clients block tracking pixels and external resources. Embedded base64 fonts are completely opaque to analytics, which is also why they're privacy-friendly.
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.