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.