No Login Data Private Local Save

@font‑face Generator - Online Custom Web Font Snippet

16
0
0
0

@font-face Generator

Create custom, cross-browser @font-face CSS snippets for your web fonts in seconds.

Font Settings
Please enter a font family name.
Font Sources

Add one or more font file references. Multiple sources help provide different formats for better browser coverage.

Preview
The quick brown fox jumps over the lazy dog.
No font applied
CSS Snippet
No snippet generated yet.

Frequently Asked Questions

The @font-face CSS rule allows you to use custom fonts on your website, even if the user doesn't have the font installed locally. It defines a font family and points to font files hosted on your server.

Different browsers support different font formats. By providing multiple sources (WOFF2, WOFF, TTF, etc.), you ensure maximum compatibility. Modern sites usually only need WOFF2 and WOFF.

font-display tells the browser how to handle font loading. swap is often recommended because it shows fallback text until the custom font loads. Other values: block, fallback, optional, auto.

Yes, you can upload local font files. The tool will either create a temporary preview or convert them to data URIs (if selected). To use the generated CSS on a live site, you need to host the font files yourself and replace placeholder URLs accordingly.

Copy the snippet into your website's stylesheet. Make sure the font file URLs point to the correct location on your server. Then apply the font-family to any element you like (e.g., body { font-family: 'YourFontName', sans-serif; }).

  • TTF – TrueType Font, widely used but not optimized for the web.
  • OTF – OpenType Font, similar to TTF with additional features.
  • WOFF – Web Open Font Format, compressed and web-optimized.
  • WOFF2 – Next‑generation WOFF with even better compression (recommended as first choice).

Yes, you can select EOT (for old Internet Explorer) or SVG fonts. However, modern browsers no longer require these formats. For EOT, the tool automatically adds the ?#iefix suffix if needed.
🔧 Related Tools