CSS @font-face Code Generator
Compile CSS font-face directives with woff2, woff, and ttf font fallbacks
Generates valid css font-face rules to load custom local web fonts.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Enter font family identifier.
- Provide paths to font files (woff2, woff, ttf).
- Configure weight and style attributes, then copy code.
FAQ
- What is font-display?
- It determines how the browser displays text while the web font is loading. Swap is recommended.
- How do I register multiple font files with different weights, like Regular and Bold, at once?
- The tool generates one @font-face block at a time, so you'd generate it once per weight — changing the file path and font-weight value each time — then stack the resulting blocks together. With the same font-family name but font-weight: 400 for Regular and 700 for Bold, the browser will automatically pick the right file for each weight.
- How do I register multiple font files with different weights, like Regular and Bold, at once?
- The tool generates one @font-face block at a time, so you'd generate it once per weight — changing the file path and font-weight value each time — then stack the resulting blocks together. With the same font-family name but font-weight: 400 for Regular and 700 for Bold, the browser will automatically pick the right file for each weight.