@font-face

Specifies a custom font to be used to display text.

The @font-face rule allows us to use custom fonts instead of just using “web-safe” fonts. We can give the font a name then point to the file in which the font is stored.

@font-face {
  font-family: /* Font name */ ;
  src: url(' ') /* Link to font */;
}

Note: The name of the file in which the font is stored, must end in a supported font format(e.g. custom_font.woff2, custom_font.ttf).

Specifying a font called “uniqueFont” then linking the URL to the font folder.

@font-face {
  font-family: uniqueFont;
  src: url('unique_font.woff');
}

Creating a custom font called “superFont” then applying the font to a div.

@font-face {
  font-family: superFont;
  src: url('super_font.ttf');
}

div {
  font-family: superFont;
}