Base64 Font Face Generator
Embed a font directly in your CSS as a Base64 data URI, so the page needs no separate font file request. Drop in a TTF, OTF, WOFF or WOFF2 file and the ready-to-paste @font-face rule is generated for you.
How to Use
Choose a font file and set the family name, weight and style. The @font-face rule appears with the font embedded as a data URI, and the preview below shows the font actually rendering. You can also paste a Base64 string directly if you already have one.
- TTF, OTF, WOFF, WOFF2 and EOT support
- Drag and drop or browse for a file
- Live preview using the embedded font
- Optional font-display and unicode-range
- Size warning for heavy embeds
When to embed a font
Embedding removes a network round trip and guarantees the font is available, which suits small icon fonts, a single display face, or offline and email HTML. It is a poor fit for large families: Base64 inflates a file by roughly a third, and the whole payload sits inside the CSS, so it cannot be cached separately or streamed.
Related Image & Color Tools
You might also need
Tools from other categories that people pair with the Base64 Font Face: