No Login Data Private Local Save

Base64 to CSS @font‑face Converter - Online Embed Font

Converter Developer Tools Base64 CSS font @font‑face
41
0
0
0

Base64 to CSS @font-face Converter

Upload font files or paste Base64 data to generate ready-to-use CSS @font-face rules for embedding fonts directly in your stylesheets.

Drop font files here or click to browse

Supports .woff2, .woff, .ttf, .otf, .svg, .eot

You can upload multiple files of the same font family

Paste your Base64 encoded font data

Supports full data URLs (data:font/woff2;base64,...) or raw Base64 strings.

Frequently Asked Questions
What is Base64 font encoding?

Base64 encoding converts binary font file data into a text string using 64 ASCII characters. This allows font files to be embedded directly inside CSS files as data: URLs, eliminating the need for separate HTTP requests to load font assets.

Why embed fonts as Base64 in CSS?

Embedding fonts in CSS reduces HTTP requests, speeds up page rendering by avoiding the font download chain, and ensures fonts work offline or in environments where external font hosting isn't available (e.g., email templates, offline web apps, AMP pages).

What are the drawbacks of Base64 fonts?

Base64 encoding increases file size by approximately 33%. The font data cannot be cached separately from the CSS file. For large fonts (over 500KB), this can noticeably increase CSS file size and parsing time. It's best suited for small to medium-sized font files.

Which font formats are supported?

This tool supports WOFF2, WOFF, TTF (TrueType), OTF (OpenType), SVG fonts, and EOT. For best browser compatibility, we recommend providing both WOFF2 and WOFF formats. Modern browsers (Chrome, Firefox, Safari, Edge) all support WOFF2.

How much does Base64 increase file size?

Base64 encoding increases the binary size by roughly 33% (4/3 ratio). For example, a 100KB font file becomes approximately 133KB when Base64-encoded. Combined with Gzip compression on web servers, the actual transferred size difference is smaller — typically only 2-10% larger.

What is font-display and which value should I use?

font-display controls how browsers handle font loading. swap (recommended) shows fallback text immediately and swaps to the custom font when loaded. block hides text briefly. fallback gives a short block period. optional may never use the font if it loads slowly.

What's the maximum recommended size for Base64 fonts?

We recommend keeping Base64-encoded fonts under 300-500KB (original file size). For larger fonts, consider hosting them as separate files with proper caching headers. This tool will warn you when files exceed 500KB in original size.

How do I use the generated CSS?

Copy the generated @font-face rule into your CSS file (usually at the top). Then reference the font family in your styles: font-family: 'YourFontName', sans-serif;. The Base64 data is self-contained, so no additional font files are needed.

🔧 Related Tools