@font-face CSS Generator
Instantly build WOFF2/WOFF/TTF @font-face CSS from your font details
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool writes the @font-face rule for you instead of hand-coding it every time you add a web font. Enter a font family name, weight, style, and the paths to your WOFF2, WOFF, and TTF files, and it generates a browser-compatible CSS snippet in real time — all processing happens locally in your browser, nothing is uploaded to a server.
How to use
- Enter the font family name, choose a weight and style (normal/italic).
- Fill in the file URLs for WOFF2, WOFF, and TTF.
- Review the @font-face CSS generated instantly below the form.
- Click Copy Code and paste it straight into your stylesheet.
FAQ
- Does this tool actually convert TTF files to WOFF or WOFF2?
- No, it doesn't convert file formats. It only takes the paths to font files you already have and generates the standard @font-face CSS that links them together.
- Why do I need to provide WOFF2, WOFF, and TTF all at once?
- Different browsers support different formats, so a fallback chain is standard practice. Modern browsers load the smaller WOFF2 first, falling back to WOFF or TTF on older environments.
- Can I use the generated code as-is?
- Yes, it includes font-display: swap and follows the standard format, so you can paste it directly into your CSS file without edits.