Using custom fonts is a great way to enhance your site's design, and the `@font-face` rule is how you embed them. This generator simplifies the process of writing that rule. Just provide the name for your font family, the URL to the font file (modern `.woff2` format is recommended), and its weight and style. The tool will generate the complete CSS block, including a `font-display: swap` property for better performance and an example of how to apply the font to your elements.
🖋️@font-face Generator
Frequently Asked Questions
What is `font-display: swap;`?
This CSS property tells the browser how to behave while the custom font is loading. `swap` tells the browser to immediately display the text with a fallback font, and then swap to the custom font once it has downloaded. This prevents users from seeing a blank space where the text should be (known as a 'Flash of Invisible Text').
Which font format should I use?
The `.woff2` (Web Open Font Format 2) is the modern standard, offering the best compression and performance. It is supported by all modern browsers.
