How to Add Custom Fonts to a Website

1. Prepare the font files

Confirm that your license allows web use. Then drop your TTF or OTF files into the Webfont Generator and download the ZIP. You’ll usually need only the WOFF2 files.

2. Upload the files

Copy the fonts folder to your website, for example to /fonts/. Fonts must load from your own domain, or from a server that sends the right Access-Control-Allow-Origin header.

3. Add the @font-face rules

Each weight and style gets one rule:

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

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Keep the same family name for every weight. The browser then picks the right file for normal and bold text by itself.

4. Use the font

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

Always list fallback fonts, because they appear while your font loads or if it fails.

Adding fonts on popular platforms

• Webflow: go to Site settings → Fonts → Custom fonts and upload your WOFF2 files.
• WordPress: block themes can manage fonts in the Site Editor’s font library. On other themes, add the files to a child theme and put the CSS in its stylesheet.
• Tailwind CSS: add the rules to your CSS, then set the font as a theme value. The Webfont Generator’s Tailwind tab gives you the code.

Check that it works

Open your site, then open your browser’s developer tools. In the Network panel, filter by Font and reload. Each file should show status 200. A 404 usually means the path in your CSS is wrong. A blocked request usually points to the cross-origin header. Then run the Page Speed Test to see how the fonts affect speed.