🔤 CSS @font-face Snippet Generator
Enter your font family name and the paths to your font files, and get a correctly ordered @font-face rule plus a usage example — ready to drop into your stylesheet.
This tool builds the CSS from file paths you type in — it doesn't need to upload your actual font files. If you want to see how the font really looks, you can optionally load a font file below just for the on-page preview; it has no effect on the generated CSS.
1. Font details
2. Preview
No file loaded — preview uses your system font at the chosen weight/style.