How to encode any font file as a base64 data uri
- Step 1Drop your font file — Any TTF, OTF, WOFF, or WOFF2 works. Format auto-detection picks the right MIME type (font/woff2, font/woff, font/ttf, font/otf) for the data URI prefix.
- Step 2Browser-side base64 encoding — FileReader streams the font bytes through a chunked btoa() encoder. Even multi-MB fonts encode in milliseconds — browser-native operations.
- Step 3Copy the @font-face snippet — The output is a complete @font-face block with the data URI inline and a sensible font-family name derived from your filename. Paste straight into your stylesheet.
Frequently asked questions
When should I embed fonts as base64?+
Single-file HTML demos, HTML email templates that strip external resources, kiosk apps, offline PWAs, and downloadable invoices/reports that must render without internet. Avoid for production websites — it blocks parallel font loading and bloats the HTML/CSS.
How much overhead does base64 add?+
Base64 inflates binary data by exactly 33.3% (4 chars per 3 bytes). A 30 KB WOFF2 becomes a 40 KB data URI. Use WOFF2 (not TTF) before encoding to keep the inflated size manageable.
Will it work in HTML email?+
Sort of. Major clients (Apple Mail, Outlook for Mac, mobile clients) render base64 fonts. Outlook on Windows desktop strips them entirely. Always include a system font fallback for emails.
Does base64 encoding affect rendering quality?+
No. The decoded bytes are identical to the source font. Quality, kerning, and OpenType features are unchanged — only the wire format differs.
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.