Best uses
- Create a clean @font-face block for one uploaded font file.
- Set the family name, weight, style, and font-display value before copying CSS.
- Prepare a small CSS file for static sites, prototypes, landing pages, and handoff notes.
Font Tools
@font-face CSS Generator
Upload a font file and generate ready-to-paste CSS for a local webfont setup.
or drag and drop a font file here
No font selected yet.
Generated CSS
Upload a font and click Generate CSS.
@font-face CSS guide
Use this tool after you already have a web-ready font file and need the CSS block that tells a browser how to load it.
How it works
The tool reads the uploaded font as a browser data URL, combines it with your CSS settings, then outputs a ready @font-face rule you can copy or download.
Supported files
Upload TTF, OTF, WOFF, or WOFF2 files. For production websites, WOFF2 is usually the best delivery format when the browser support target allows it.
Privacy and limits
The font is handled in the browser. The generated CSS can include embedded font data, so keep license terms in mind before shipping commercial fonts.
Common issues
- Use the same font-family name in your CSS rule and in the elements that should use the font.
- Use the correct weight, such as 400 for regular and 700 for bold, so browsers choose the right face.
- Large embedded fonts can make CSS heavy; link external WOFF2 files for production when possible.
Next step
If the source is still OTF or TTF, use Font to Webfont first. If you need to inspect the result visually, open Font Preview.
Before you ship webfonts
A font file can convert successfully and still be wrong for a website if the license, character coverage, weight selection, or CSS loading strategy is not ready. Test headings, body copy, numbers, and accented characters before publishing.
Treat conversion as one part of the webfont job. The final setup also needs correct file paths, fallback fonts, caching, and a font-display choice that matches the site. If the font is only used for headings, avoid shipping unnecessary weights that slow down every page.
- Confirm the license allows web use.
- Ship only the weights and styles the site needs.
- Use CSS with sensible fallback fonts and a clear font-display choice.
After downloading the result, open it once before using it in a client send, upload form, website, or archive. This final check catches format support issues, unexpected file size changes, missing characters, clipped media, or page-order mistakes while the original file is still available.
If the output will be reused, note the settings that produced it. That makes the next export easier to repeat and reduces guesswork when another file needs the same treatment.