Free @font-face Generator.

Generate @font-face CSS and convert font files to web-safe formats effortlessly.

@font-face Generator

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
CSS will appear here...

How it works

Four steps.

  1. 01

    Upload your font files in WOFF2, WOFF, TTF, OTF, or EOT formats.

  2. 02

    Enter a custom font family name or use the suggested one.

  3. 03

    Adjust additional settings such as font weight, style, and display options.

  4. 04

    Copy the generated @font-face CSS for use in your web projects.

Features

Create Web-Ready Fonts with Ease.

Generate custom @font-face CSS rules and convert fonts to various web formats instantly.

  • Supports Multiple Font Formats

    Convert and generate @font-face CSS for WOFF2, WOFF, TTF, OTF, and EOT font files.

  • Customizable CSS Options

    Adjust font-weight, style, display settings, and include fallback fonts for better compatibility.

  • Instant Font Preview

    See how your font will look in real-time before downloading the CSS.

FAQ

Questions.

Can't find an answer? Send us your question.

What font formats are supported?

Our generator supports WOFF2, WOFF, TTF, OTF, and EOT font formats.

Can I customize font settings?

Yes! You can adjust font-weight, style, display options, and fallback fonts.

How do I use the generated CSS?

Simply copy the @font-face CSS and add it to your stylesheet for web usage.

Is this tool free to use?

Yes, our @font-face generator is completely free with no hidden costs.

Related tools

More Image & Media tools.

All 32 Image & Media tools →

Built by Infyways

Need more than a tool.

These utilities are made by the Infyways studio. When a free tool is not enough, we build the real thing.