What is @font-face in CSS?

@font-face is a CSS rule that lets you load a custom font from a file URL rather than relying on system fonts. You specify the font-family name, the file src (one or more URLs), and optionally the font-weight, font-style, and font-display. Once defined, you use the family name anywhere in your CSS like any other font.

Which font format should I use — woff2 or woff?

Use woff2 as your primary format. It has the best compression and is supported by all modern browsers. Woff is a good fallback for older browsers (IE 11). TTF and OTF are rarely needed on the web today. If you're self-hosting, serve woff2 first, woff second.

What does font-display: swap do?

font-display: swap tells the browser to show a fallback system font immediately while the custom font loads, then swap it in once downloaded. This prevents invisible text during page load (FOIT) and is recommended for most body text. Use 'optional' for decorative fonts where a fallback is acceptable permanently.

Can I add multiple font weights in one @font-face block?

No — each @font-face block defines exactly one weight and style combination. For a full type system you need separate blocks for each variant (400 normal, 700 normal, 400 italic, etc.). This generator handles that automatically — just click 'Add Variant' for each combination you need.

Do I need to upload my font file to use this tool?

No. This is a 100% client-side tool — nothing is uploaded to any server. You provide the URL where your font file is hosted (your CDN, GitHub, Google Fonts CDN, etc.), and the generator builds the @font-face CSS for you.

Free Developer Tool

Generate
@font-face CSS Instantly

Build production-ready @font-face declarations for any custom web font. Set family name, weights, styles, file URLs, and font-display — get clean CSS in seconds.

🔤

Multi-Weight Support

Add as many font weight and style variants as you need — thin, regular, bold, italic — all in one click.

⚡

Auto Format Detection

Paste any font URL (.woff2, .woff, .ttf, .otf) and the correct format() hint is added automatically.

📋

Copy-Ready Output

Get clean, properly indented @font-face CSS that you can paste directly into your stylesheet.

Font Family Name

This becomes the value you use in font-family: 'MyFont' throughout your CSS.

Font Variants(1 variant)

Variant 1

Weight

Style

font-display

Font File URL(s)

One URL per line. Format (woff2, woff, ttf, otf) is detected automatically from the file extension.

Generated CSS

@font-face {
  font-family: 'MyFont';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: /* paste font URL here */;
}

Tip: Paste this CSS at the top of your stylesheet (or in a @layer base block in Tailwind). Reference the font with font-family: 'MyFont', sans-serif;. Always include a generic family as a fallback.

Frequently Asked Questions

Everything you need to know about Font Face Generator.

Generate@font-face CSS Instantly