Font to Base64 Converter
Encode a font file as a base64 data: URI wrapped in ready-to-use @font-face CSS — free, 100% in your browser, with an honest size-penalty warning. Your font is never uploaded.
100% private — your font never leaves your browser. Safe for licensed or unreleased fonts.
When to use: inlining a font removes one HTTP request, but base64 is ~33% larger, can’t be cached separately, and blocks CSS parsing — best reserved for small icon fonts or critical single-weight faces. Encoded locally; your font is never uploaded. Check the font’s licence allows web embedding.
How to use the Font to Base64 Converter
- Drop a font file (.woff2/.woff/.ttf/.otf).
- Set the font-family name.
- Keep 'wrap in @font-face' for ready CSS.
- Copy the base64 data URI or full @font-face block.
What you can use it for
- Inline a small icon font to save a request
- Embed a critical font directly in CSS
- Create a self-contained single-file demo
- Generate a base64 data URI with the correct MIME type
More free tools
Working with web fonts?
Convert, inspect and optimise fonts with our free in-browser typography tools — nothing uploaded.
See all free font tools →Frequently asked questions
Does base64 make my font file bigger?
Yes — base64 encoding adds roughly 33% to the size, and inlined fonts can't be cached separately, so use it only for small or critical fonts.
Is inlining a font faster than a separate file?
It removes one HTTP request but blocks CSS parsing and defeats caching. For most fonts a separate cached .woff2 loads faster overall.
What MIME type should a base64 font use?
font/woff2 for WOFF2, font/woff for WOFF, font/ttf and font/otf for the rest — this tool sets it automatically.
Will an inlined base64 font still be cached?
No — it's part of your CSS, so it re-downloads whenever the CSS changes and isn't cached as a separate file.
Is my font uploaded to convert it?
No. Encoding happens locally in your browser, so licensed fonts stay on your machine.