Importing fonts

Recommended font formats

To import a custom font, you should have both a WOFF2 and a WOFF version of the font. WOFF2 is the modern standard, offering better compression and performance. The WOFF version ensures compatibility with older browsers that don't support WOFF2, such as Internet Explorer and some legacy mobile browsers.

Advanced: online conversion tools

You can use online tools to convert your font files to WOFF2 and WOFF formats. For example, you can use Transfonter or Font Squirrel.

Importing fonts in CSS

To import a font in CSS, you can use the @font-face rule. This rule allows you to specify the font files and their properties, such as font family, font weight, and font style. Importing the font only loads the font files, you will still need to specify the font-family property in your CSS to use them.

/* Syntax to import a font */
@font-face {
  /* Font family name */
  font-family: "Custom Font";
  src: url("fonts/custom-font.woff2") format("woff2"),
  url("fonts/custom-font.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Syntax to import additional cut of the font */
@font-face {
  /* Match the font-family name */
  font-family: "Custom Font";
  src: url("fonts/custom-font-bold.woff2") format("woff2"),
  url("fonts/custom-font-bold.woff") format("woff");

  /* Specify which cut of the font this is */
  font-weight: bold;
  font-style: normal;
}

/* Use the font in your CSS */
html {
  font-family: "Custom Font", sans-serif;
}