You Have the Font File But Not the @font-face Rule

Priya had a beautiful custom font for her client's website. She had the TTF file, the license, and the design approval. What she did not have was the correct @font-face CSS rule. She opened the MDN documentation, read about font-display, unicode-range, and font-stretch, and realized she was spending twenty minutes on a task that should take twenty seconds.

The font was ready. The CSS was a research project.

The pain, in four layers

Pain 1: @font-face syntax is easy to get wrong.
Wrong format string. Missing fallback. Incorrect weight mapping. A small mistake means the font does not load, or loads incorrectly, or flashes unstyled text. The error is invisible until a user on a slow connection sees it.

Pain 2: multiple weights mean multiple rules.
You have Regular, Bold, and Italic. That is three @font-face declarations, each with slightly different parameters. Copy-paste one wrong and the Bold weight loads as Regular. The design looks fine to you because your browser cached the correct version.

Pain 3: most generators want your font file.
You upload the font to a web service, it generates the CSS, and you copy it back. For a licensed font, that means sending your intellectual property to a server you do not control. For a client project, that might violate the license terms.

Pain 4: testing the CSS requires a live page.
You write the rule, you save the file, you refresh the browser, you inspect the network panel, you check if the font loaded. The feedback loop is slow and the debugging is opaque.

The tool

OnliTools Font CSS Generator takes your font files and produces the exact @font-face CSS you need, plus a live HTML preview — directly in your browser. Upload your fonts, review the generated rules, and copy the CSS. The processing stays on your device.

How it works

1. Go to onlitools.com/font-css-generator.
2. Upload your font files (TTF, OTF, WOFF, WOFF2).
3. Review the generated @font-face rules.
4. Copy the CSS and the HTML example into your project.

Why this matters

Priya now generates her font CSS in under a minute. She uploads the files, reviews the rules, and copies the result. No MDN. No guesswork. No fonts leaving her machine.

If you are reading documentation just to write a @font-face rule, you are paying a tax on a task that should take seconds. This tool removes the tax.