@font-face

Specifies a custom font to be used to display text.

Syntax

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).

Example 1

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

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

Example 2

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;
}

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.

Learn CSS on Codecademy