How to use custom fonts on a website with @font-face

Websites are not limited to the fonts that are already on a visitor's device. With a short piece of CSS, you can load your own fonts, so your pages look the same on every computer and phone. This guide shows how, in a few simple steps.

Step 1: Get the font in WOFF2 format

For websites, WOFF2 is the best format. It is compressed, loads quickly and is supported by all modern browsers. If you only have a TTF or OTF file, you can convert it with our TTF to WOFF2 converter. It works in your browser and does not upload your file. If you want to know how the formats differ, read our format guide.

Step 2: Check the license

Before you put a font on a website, confirm that the license allows web embedding. Many free fonts do (the SIL Open Font License does), but some licenses allow desktop use only. See our guide to commercial use of free fonts for how to check.

Step 3: Upload the file

Copy the WOFF2 file to your website, for example into a folder named fonts. Host the font on your own domain when you can. This avoids extra connections to other servers and gives you control over caching.

Step 4: Write the @font-face rule

Add this to your stylesheet:

@font-face {
  font-family: "My Font";
  src: url("/fonts/my-font.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

The name in font-family is your own choice. The src line tells the browser where the file is and what format it is in. The font-weight and font-style describe this particular file, so a bold file would use 700.

Step 5: Use it

body {
  font-family: "My Font", Arial, sans-serif;
}

Always add fallback fonts after your custom one. If the file fails to load, the browser will show the next font in the list instead of a blank space.

Adding bold and italic

Each style is a separate file, so declare each one with its own @font-face rule using the same font-family name but a different weight or style:

@font-face {
  font-family: "My Font";
  src: url("/fonts/my-font-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

If you do not provide a bold file, the browser will fake a bold by thickening the letters, which usually looks worse than the real thing.

Performance tips

• Use font-display: swap. It shows text immediately in a fallback font and swaps to your font when it loads, so visitors never stare at invisible text.
• Load only what you need. Each weight is a separate download. Two or three files are usually enough.
• Preload the main font. For your most important font, add <link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin> in the head of the page.
• Consider a variable font. One variable file can replace several weights.
• Enable caching. Fonts rarely change, so serve them with a long cache lifetime.

Common problems

• The font does not appear. Check the file path in the browser's developer tools (Network tab). A typo or wrong folder is the usual cause.
• It works locally but not on the live site. Make sure the server sends WOFF2 files with the correct type, and that the font is on the same domain or served with the right CORS headers.
• The text jumps when the font loads. Choose a fallback font with similar proportions, and preload the font file.

Where to find fonts

Browse our font directory for fonts with clear licenses, and filter by language or style. Each font page shows its license, so you know before you embed it.