# Font to Base64 & CSS Generator

> Convert font files directly into CSS @font-face data URIs.

Font to Base64 & CSS Generator converts font files between TTF, OTF, WOFF, WOFF2, and Base64 CSS definitions locally in your web browser. Font data processing runs entirely on your device without transmitting files over the network.

**URL:** https://convertto.tech/t/font-to-base64
**Category:** Developer Tools (https://convertto.tech/c/developer-tools)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

- **Privacy:** Runs entirely in your browser — nothing is uploaded
- **Cost:** Free, unlimited, no sign-up

## What an inlined @font-face actually is

Inlining replaces the URL in an `@font-face` rule with a `data:` URI holding the font bytes, encoded as base64 per RFC 4648. The stylesheet stops referencing a separate file and starts carrying the font itself. Browsers treat a `data:` source exactly like any other: the `format()` hint still decides whether the entry is used, and the media type in the URI should match what you encoded, `font/woff2` for WOFF2 and `font/ttf` for TrueType.

```css
@font-face {
  font-family: 'Example Sans';
  src: url('data:font/woff2;base64,d09GMgABAAAA...') format('woff2');
  font-weight: 400;
  font-display: block;
}
```

## The one-third tax

Base64 encodes every three bytes as four ASCII characters, so an encoded font is about 33 percent larger than the file it came from before any transfer compression is applied. Compressing the stylesheet claws some of that back, but never all of it, and the font bytes inside were already compressed if you encoded a WOFF2. Inlining a 90 KB web font adds roughly 120 KB to a stylesheet that previously fit in a few kilobytes.

## When inlining helps

- A tiny icon font of a dozen glyphs, where one fewer request beats a few hundred extra bytes.
- A single-file HTML deliverable, a report, a slide export or an offline document that has to render correctly with no network at all.
- A build that cannot serve static assets from a second origin, or an environment where relative font URLs keep breaking.

## When it hurts

- The font can no longer be cached separately. Change one CSS rule and every visitor re-downloads the font with it.
- Stylesheets are render-blocking. A font inside the stylesheet is now on the critical path, where a linked font was not.
- `unicode-range` splitting stops paying off, because the browser has already downloaded every range whether the page uses it or not.
- `font-display` has less to do. There is no separate fetch to swap in, so the tuning that hides font loading behaviour no longer applies the same way.
- Diffs and version control get unpleasant: one changed glyph rewrites a single enormous line.

> **Content Security Policy** — A `data:` font URI is blocked by a policy that does not allow it. If you serve a CSP, `font-src` needs `data:` in its source list, and an inline `<style>` block carrying the rule needs `style-src` to permit it too. This is a common reason an inlined font works locally and silently falls back to a system face in production.

| Format | Outline data | Compression | Where it belongs |
| --- | --- | --- | --- |
| `.ttf` TrueType | Quadratic curves in the `glyf` and `loca` tables | None | Desktop installation, Android build pipelines, tools that only read `glyf` |
| `.otf` OpenType with PostScript outlines | Cubic curves in a `CFF ` or `CFF2` table | None | Desktop installation, print and design applications |
| `.woff` WOFF 1.0 | Whichever of the two the wrapped font already used | zlib, applied to each table separately | A fallback source for browsers too old for WOFF2 |
| `.woff2` WOFF 2.0 | Whichever of the two the wrapped font already used | Brotli over the whole font, after a reversible transform of `glyf`, `loca` and `hmtx` | The format to actually serve on the web |
| `.eot` Embedded OpenType | Either, wrapped in a Microsoft-specific container | Optional MicroType Express | Internet Explorer 8 and earlier. A W3C Member Submission that never became a standard |
| `.ttc` / `.otc` collection | Either, with tables shared between several faces | None on its own, though WOFF2 can wrap a collection | Shipping a whole family in one file, common for CJK fonts |

*TTF and OTF are two flavours of the same sfnt container. WOFF and WOFF2 are packaging placed around one of them, not a third kind of outline.*

> **Check the licence before you convert** — Converting a font modifies it, and plenty of commercial licences forbid exactly that. A licence that allows you to install a font on your own machine very often does not allow you to embed it in a web page, redistribute it, or hand a converted copy to anyone else. The OpenType `OS/2` table carries an `fsType` field in which the foundry declares its embedding permission, with values covering installable, restricted licence, preview and print, and editable embedding, and a converter that rebuilds the font can drop or flatten that declaration. Read the EULA first, and use the foundry web kit when one is offered.

## Related font conversions

- [TTF to WOFF2](https://convertto.tech/t/ttf-to-woff2) to produce the smallest thing worth encoding.
- [OTF to TTF](https://convertto.tech/t/otf-to-ttf) if your source family ships PostScript outlines.
- [WOFF to TTF](https://convertto.tech/t/woff-to-ttf) and [WOFF2 to TTF](https://convertto.tech/t/woff2-to-ttf) to unwrap an existing web font.
- [Font availability checker](https://convertto.tech/t/font-availability-checker) to check whether you need to ship a font at all.
- Format hubs: [TTF](https://convertto.tech/f/ttf), [OTF](https://convertto.tech/f/otf), [WOFF](https://convertto.tech/f/woff) and [WOFF2](https://convertto.tech/f/woff2).

## How to use

1. Select your font file — the file stays on your device and is never uploaded.
2. Press Run, then download the result when it is ready.

## FAQ

### Is my font file uploaded anywhere?

No, font conversion happens entirely in your browser using JavaScript.

### What is the difference between OTF and TTF?

Both are OpenType fonts using the same sfnt container. A TTF stores glyph outlines as quadratic curves in the glyf and loca tables; an OTF stores them as cubic curves in a CFF or CFF2 table. The extension reflects which outline format the file uses, and the rasteriser decides by reading the version tag inside the file rather than the extension.

### Is converting a font lossless?

Unwrapping WOFF or WOFF2 back to sfnt is defined to be reversible, so the table data comes back intact. Converting between outline formats, such as OTF to TTF, is not: cubic curves have to be approximated by quadratics, and hinting and variable-font axes do not carry over.

### Am I allowed to convert a commercial font?

Often not. Many font licences forbid modification, web embedding or redistribution, and converting a font is a modification. The OS/2 table carries an fsType field in which the foundry declares its embedding permission. Check the EULA before converting a font you did not make.

### Can I convert an EOT or TTC file here?

No. This tool accepts TTF, OTF, WOFF and WOFF2. EOT is a retired Microsoft container for Internet Explorer 8 and earlier, and TTC is a collection holding several faces in one file, which needs a different unpacking step.

## Sources

- [OpenType specification](https://learn.microsoft.com/en-us/typography/opentype/spec/) — Microsoft
- [OpenType font file structure (sfnt)](https://learn.microsoft.com/en-us/typography/opentype/spec/otff) — Microsoft
- [WOFF File Format 1.0](https://www.w3.org/TR/WOFF/) — W3C
- [WOFF File Format 2.0](https://www.w3.org/TR/WOFF2/) — W3C
- [OpenType OS/2 table (fsType embedding permissions)](https://learn.microsoft.com/en-us/typography/opentype/spec/os2) — Microsoft
- [RFC 4648: The Base16, Base32, and Base64 Data Encodings](https://www.rfc-editor.org/rfc/rfc4648) — IETF
- [CSS Fonts Module Level 4](https://www.w3.org/TR/css-fonts-4/) — W3C

## Related tools

- [OTF to TTF Converter](https://convertto.tech/t/otf-to-ttf): Convert OpenType (.otf) fonts to TrueType (.ttf) format.
- [TTF to WOFF Converter](https://convertto.tech/t/ttf-to-woff): Convert TrueType (.ttf) fonts to Web Open Font Format (.woff).
- [TTF to WOFF2 Converter](https://convertto.tech/t/ttf-to-woff2): Convert TrueType (.ttf) fonts to optimized WOFF2 web fonts.
- [WOFF to TTF Converter](https://convertto.tech/t/woff-to-ttf): Convert WOFF web fonts back to desktop TrueType (.ttf) fonts.
- [WOFF2 to TTF Converter](https://convertto.tech/t/woff2-to-ttf): Decompress WOFF2 fonts back to TTF format.
- [Base64 Encoder & Decoder](https://convertto.tech/t/base64-encode-decode): Encode and decode Base64 with automatic direction detection, plus file and data-URI support.
- [7Z to ZIP Converter](https://convertto.tech/t/7z-to-zip): Convert 7-Zip (.7z) archives into universal ZIP format.
- [GZIP to ZIP Converter](https://convertto.tech/t/gzip-to-zip): Convert GZ files into standard ZIP archives.