@font-face CSS Generator
Generate WOFF2/WOFF/TTF @font-face rules from a font family, weight, and file paths
Stop hand-writing the same @font-face block every time you add a web font. Fill in the font family name, weight, and style along with your WOFF2, WOFF, and TTF file paths, and the tool builds standards-compliant CSS with a proper cross-browser fallback chain in real time. Everything runs in your browser — nothing is uploaded to a server.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Enter your font family name and pick a weight and style (normal or italic).
- Enter the path (URL) for each of your WOFF2, WOFF, and TTF files.
- Review the @font-face CSS generated live below the form.
- Hit the copy button and paste the code straight into your stylesheet.
FAQ
- Does this actually convert a TTF file into WOFF?
- No — it doesn't convert file formats. You point it at WOFF2/WOFF/TTF files you already have, and it generates the standard @font-face CSS that links them together.
- Why do I need to include WOFF2, WOFF, and TTF?
- Browser format support varies, so building a fallback chain is standard web practice. Modern browsers grab WOFF2 (the smallest file), while older environments fall back to WOFF and then TTF in order.
- Can I use the generated code as-is?
- Yes. It follows the standard pattern and already includes font-display: swap, so you can paste it into your CSS file and ship it without edits.