CSS Custom Fonts

CSS Web Fonts (@font-face)

Web fonts allow you to use fonts that are not installed on the user's computer.

You can use the @font-face rule to define a custom font.

Syntax

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Using the Font

After defining the font in the @font-face rule, you can use it in your CSS like any other font.

div {
  font-family: myFirstFont;
}

Google Fonts

The easiest way to use web fonts is to use a service like Google Fonts.

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}