Self-host custom fonts with a free webfont CSS kit

Create and save your webfont kit

1. Upload your licensed TTF, OTF, WOFF or WOFF2 file in the free converter.
2. Choose WOFF2 and any additional format required by your project.
3. Run conversion and check the preview and output notes.
4. Download the complete ZIP before the 24-minute download window ends.
5. Extract the kit and retain the relationship between stylesheet.css and the fonts directory.

Connect the stylesheet to your page

Upload the fonts directory and generated stylesheet together. Link the stylesheet from your HTML, or integrate the generated rules into your project’s own stylesheet. Paths inside CSS resolve relative to the CSS file, so changing its location may require updating the font URLs.

The example uses a placeholder family and filename. Replace both with the actual values from your downloaded kit rather than guessing from the original upload name.

@font-face {
  font-family: "Project Sans";
  src: url("./fonts/project-sans-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Project Sans", sans-serif;
}

Declare the weight the file actually provides

A static regular face needs its own weight and style declaration. Add separate rules for genuine bold or italic files. For a variable source, use a supported range matching the font rather than pretending a static face contains all weights.

Generated CSS provides a starting point. Review the family names and paths in your own project and apply the family to the elements you intend to style.

• Free font tester →
• Free type scale generator →

Check loading and real content

Open the published website with browser developer tools and confirm the font file is requested successfully. Inspect the computed family on headings and body text. If the font is hosted on a different origin, review the server’s cross-origin response rules.

Test the words and languages used on the site, plus a narrow viewport and enlarged text. Missing characters can fall back to another font. A conversion or CSS kit does not create glyphs that were absent from the source.

• Free responsive font size generator →
• Font formats and conversion →

Questions & answers

Is the CSS webfont kit free?

Yes. FontReady’s converter generates the kit for free without a FontReady account. Your font’s original licence still controls embedding and distribution rights.

Can I use the kit with WordPress or a website builder?

Use the kit where you can add font files and CSS appropriately. A platform’s native font manager may be easier. Follow the relevant installation guide for WordPress, Elementor, Divi or Webflow.