Font to Base64 Converter
Convert font files to Base64 and generate CSS @font-face code for WOFF, WOFF2, TTF, and OTF fonts. Inline fonts directly into your stylesheet — no external font files needed.
Drop a font file here or click to select
WOFF · WOFF2 · TTF · OTF · EOT — Max 25 MB
Font Size Warning: Base64-embedded fonts increase CSS file size and cannot be cached by the browser separately. For large fonts, serving the font file directly with proper caching is usually a better option.
How to Convert a Font to Base64
Upload a Font File
Drop a WOFF, WOFF2, TTF, OTF, or EOT file into the tool. The font name is pre-filled from the filename.
Set Font Options
Enter a font-family name, and choose font-weight and font-style to match how you use the font in CSS.
Copy the CSS
Click Generate CSS and copy the @font-face block to paste into your stylesheet — no external font files needed.
How to Use a Base64 Font in CSS
Paste the generated @font-face block at the top of your CSS file or inside a <style> tag, then use the font by name anywhere:
style.css
@font-face {
font-family: 'MyFont';
src: url('data:font/woff2;base64,...')
format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MyFont', sans-serif;
}When (Not) to Use Base64 Fonts
Good for
- Small icon or subset fonts under 20 KB
- Email templates where external file URLs are blocked
- Single-file HTML documents or offline apps
- Avoiding an extra HTTP request for a small font
Not a good fit…
- Fonts larger than 50 KB — the 33% Base64 overhead matters
- When you need the browser to cache the font file separately
- Loading multiple weights or styles — inlined fonts bloat fast
- When you are already using a font service like Google Fonts or Adobe Fonts
- Performance-sensitive pages where CSS bundle size matters
WOFF2 vs WOFF vs TTF
Smaller font files mean smaller CSS when inlining Base64. Always prefer WOFF2.
| Format | Extension | File Size | Browser Support | Base64 Recommendation |
|---|---|---|---|---|
| WOFF2 | .woff2 | Smallest | All modern browsers | Preferred |
| WOFF | .woff | Small | All modern browsers + IE9+ | Fallback |
| TTF | .ttf | Large | All browsers | Compat only |
| OTF | .otf | Large | All browsers | Compat only |
| EOT | .eot | Large | IE only (deprecated) | Avoid |
Frequently Asked Questions
What is a Base64 font?
A Base64 font is a font file encoded as Base64 text and embedded directly inside a CSS @font-face rule as a Data URI (data:font/woff2;base64,…). The font loads with the stylesheet — no separate HTTP request needed.
How do I use a Base64 font in CSS?
Paste the generated @font-face block into your stylesheet, then use font-family: 'YourFontName' in any CSS rule. The browser decodes the Base64 and renders the font without fetching an external file.
Does inlining a font affect page performance?
Yes. A Base64 font increases CSS file size by roughly 33%. A 30 KB WOFF2 font becomes about 40 KB of text in the stylesheet. This is acceptable for small fonts; for larger ones, serving the font file separately so the browser can cache it independently is usually better.
Which font format should I Base64-encode?
Use WOFF2 whenever possible — it has the best compression and is supported by all modern browsers. WOFF is a good fallback for IE9+. Avoid inlining TTF and OTF since they are much larger than WOFF2.
Can I Base64-encode a font subset?
Yes, but this tool encodes the entire font file you upload. To subset first (keeping only the characters you need), use a tool like pyftsubset or an online subsetting service, then upload the result here. Subsetted fonts are much smaller and more practical to inline.
Where is the font file processed?
Entirely in your browser. The font file is read locally via the FileReader API and never sent to any server. Both the Base64 encoding and the CSS generation happen client-side.