How to convert a font to Base64
Three steps, no sign-up, and the file never leaves your machine.
1
Add your font
Drag a .woff2, .woff, .ttf, .otf or .eot file onto the drop zone, or click to browse. Multiple files are fine.
2
Tune the CSS
Rename the font family, set the weight, style and font-display, then switch between a full @font-face rule, a data URI or the raw Base64 string.
3
Copy or download
Check the live preview, then copy the result to your clipboard or download it as a .css file and drop it into your project.
When Base64 fonts help — and when they hurt
Inlining a font removes a network request, but it also inflates your CSS by roughly 33% and blocks rendering until the stylesheet finishes downloading. Use it deliberately.
Good fit
- Small icon fonts or a single critical weight, roughly under 50 KB.
- Self-contained deliverables: HTML email templates, offline docs, single-file exports.
- Environments where you cannot host extra files, such as sandboxed widgets or embedded reports.
- Killing a render-blocking round trip for the one font above the fold.
Poor fit
- Full families with many weights — the CSS balloons and every page pays for it.
- Anything you want cached independently; inlined fonts are re-downloaded whenever the CSS changes.
- Large TTF or OTF files. Convert them to WOFF2 first, then encode.
- Sites where the CSS is already a render-blocking bottleneck.
Frequently asked questions
Everything people usually ask about encoding fonts as Base64.
Are my font files uploaded to a server?
No. The conversion runs entirely in your browser using the FileReader API. Your font file never leaves your device, so licensed and unreleased fonts stay private. You can even load this page once, go offline, and it still works.
Which font formats can I convert?
TTF, OTF, WOFF, WOFF2 and EOT. For the web, WOFF2 is strongly recommended — it is already compressed, so it produces a far smaller Base64 string than the same font as TTF or OTF.
Why is the Base64 string bigger than the original file?
Base64 represents every 3 bytes of binary data as 4 ASCII characters, so the output is about 33% larger than the source. The tool shows the exact original size, encoded size and overhead for every font you add.
Should I inline every font as Base64?
No. Inlining saves an HTTP request but blocks CSS parsing and cannot be cached separately from your stylesheet. It works best for small icon fonts or a single critical weight under roughly 50 KB. Large families are better served as normal .woff2 files with font-display: swap.
How do I use the generated @font-face rule?
Paste the generated CSS into your stylesheet, then reference the family in any rule — for example body { font-family: "MyFont", sans-serif; }. No font file needs to be hosted alongside it.
Does a Base64 font work in every browser?
Data URIs in @font-face are supported by every modern browser. WOFF2 covers everything current; add a WOFF fallback only if you still support very old browsers. EOT is only relevant for legacy Internet Explorer.
Is there a file size limit?
The tool accepts files up to 20 MB, but that is a safety cap, not a recommendation. Anything above a few hundred KB will noticeably slow your CSS down — the size badge on each file flags this for you.
Is the converter free?
Yes. Completely free, no sign-up, and no limit on how many fonts you convert.
