Upload a font file and get a ready-to-paste @font-face CSS rule, with a live editable preview so you can see exactly how it renders.
When you upload a font file, the tool reads it locally with the FileReader API and converts it into a base64 data URI. That data URI is embedded directly inside a standard @font-face rule, alongside the format() hint matched to your file's extension. The same data URI is also registered live in your browser with the FontFace API, so the preview box below instantly renders in your actual uploaded font.
Because the font data lives inside the CSS itself as a data URI, there's no separate font file to host or link to.
Base64 encoding inflates the font's size by roughly a third, so embedded CSS is best for prototypes, not production.
The same data used in the CSS is loaded through the FontFace API so you can preview it immediately, without saving anything.
Click into the preview box and type your own text to see exactly how headings or body copy will look in this font.
Embedding the font as a base64 data URI keeps the generated CSS completely self-contained, so you can paste it anywhere without also hosting a separate font file. It's convenient for quick prototypes and demos, but it does make the CSS noticeably larger, so for a production site it's usually better to self-host the font file and reference it with a normal url() path instead.
TTF (TrueType), OTF (OpenType), WOFF and WOFF2. The tool detects the format from your file's extension and sets the matching format() hint automatically.
No. The file is read locally with the FileReader API and converted to a data URI entirely in your browser. Nothing is sent anywhere.
Yes. The preview box is editable — click into it and type or paste whatever text you want to check in the uploaded font.
More handy tools from My Panda Toolbox.