@font-face Generator – Free CSS Font Face Code Tool

Generate ready-to-paste @font-face CSS from your TTF, OTF, WOFF, or WOFF2 font files — no manual syntax writing, no guesswork on format hints. Upload a file, set the weight and style, and copy the finished CSS straight into your stylesheet or WordPress Custom CSS block.

How It Works

The @font-face rule tells a browser where to find a custom font file and which font-family name to register it under. This generator builds that rule for you from three inputs:

• Font file(s) — the tool reads each file’s extension (.woff2, .woff, .ttf, .otf, .eot) and maps it to the matching CSS format() hint automatically, so browsers can pick the version they support.
• Family name, weight, and style — these become the font-family, font-weight, and font-style declarations. Uploading a file named something like Inter-Bold.ttf auto-fills a sensible family name and weight, which you can edit.
• Output mode — choose Linked path, which points to a font file sitting in your theme or uploads folder, or Base64 embed, which inlines the font data directly into the CSS so there’s no separate file to host.

If you upload more than one format to the same font entry (say, a .woff2 and a .ttf for the same weight), the tool lists them together as a fallback chain in the order modern browsers check them — woff2, then woff, then ttf/otf, then eot for older browsers.

When to Use This

• Freelancers adding a client’s brand typeface to a WordPress site where the theme doesn’t include it by default
• Agencies building a reusable font kit with multiple weights and styles for a design system or component library
• Site owners who bought or downloaded a font license and just need working CSS without digging into font-format syntax
• Anyone converting a single TTF or OTF file into browser-ready CSS without installing font-conversion software

FAQ

What does the @font-face rule do in CSS?
@font-face lets you load a custom font file and register it under a name you choose, so you can use that name anywhere font-family is accepted in your stylesheet — even if the font isn’t installed on the visitor’s device.

How do I turn a TTF file into @font-face CSS?
Upload the .ttf file to a font entry in the generator, confirm the family name, weight, and style, then click Generate. The tool automatically applies format('truetype') for you — no manual conversion needed.

How do I turn an OTF file into @font-face CSS?
Same process as TTF: upload the .otf file, and the generator applies format('opentype') automatically. OTF and TTF can even sit in the same fallback chain as WOFF2/WOFF if you upload both.

What’s the difference between this tool and Font Squirrel’s @font-face Generator?
Font Squirrel converts and repackages font files into new formats for download. This tool skips the conversion step — it takes the font files you already have and generates the CSS around them, including a Base64 option so you don’t need to host a separate font file at all.

Should I use Base64 embed or a linked file path?
Base64 embed keeps everything in one CSS block with no extra file to upload, which is convenient for small icon fonts or quick prototypes. For body-text fonts or larger files, Linked path is usually better for page speed, since the browser can cache the font file separately instead of re-downloading it inside your CSS every time.

What font formats do I need for full browser support?
WOFF2 alone covers the large majority of current browsers. Adding WOFF as a fallback covers a few more, and TTF/OTF or EOT are only worth including if you specifically need to support very old browsers.

Does this tool upload my font files anywhere?
No — every file you add is processed entirely in your browser to build the CSS and preview text. Nothing is uploaded to a server.