Convert TTF, OTF, WOFF, or WOFF2 to a base64 data URI for direct embedding in CSS @font-face. Useful for HTML emails and offline kiosks.
Upload your font file
FileReader encodes the binary as a base64 data URI
Copy the data URI for direct use in a CSS src: url(data:font/...) declaration
0 bytes uploaded. Font to Base64 Data URI Encoder runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
Single-file HTML demos, HTML email templates that must render without external resources, kiosk apps, and offline PWAs. Avoid for production sites — it blocks parallel font loading and bloats the HTML/CSS.
Base64 adds ~33% overhead. A 30 KB WOFF2 becomes a 40 KB data URI. Use the WOFF2 format (not TTF) before encoding to keep the inflated size manageable.
WOFF2 → font/woff2, WOFF → font/woff, TTF → font/ttf, OTF → font/otf. Modern browsers accept the legacy application/font-woff2 too.
Compress TTF or OTF fonts to WOFF2 directly in your browser. Typically 30–50% smaller than WOFF. Powered by Google's WASM Brotli encoder. Zero upload.
Open toolBuild a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.
Open toolGenerate the right <link rel="preload"> tags for above-the-fold web fonts. Cuts LCP by 100–500 ms by starting the font fetch alongside the HTML parse.
Open tool