You can specify a custom font so that you aren’t solely reliant on the fonts that are installed on the user’s computer.
Adding custom fonts with CSS with @font-face At-Rule
The CSS @font-face at-rule can be used to specify a custom font so that you aren’t solely reliant on the fonts that are installed on the user’s computer.
The @font-face at-rule allows you to select from a wider range of fonts than would normally be available if relying solely on the user’s system fonts. Without using @font-face, the font that the user sees will be limited to the fonts installed on their device. So if I hadn’t used @font-face to retrieve the font, specifying "Open Sans" for the body element would only work if the user had that font installed on their device. If not, their browser would use the default sans-serif font (because we specified sans-serif). Many systems use Helvetica, Verdana or Arial as the default sans-serif font, however, there’s no guarantee that those fonts will be installed on the user’s system.
Fonts specified with the @font-face at-rule are only fetched and activated if they are used within the HTML document. This is good for performance, as the font is not downloaded unless its needed.
Example adding custom fonts with CSS
Here are example of using the @font-face rule:
@font-face {
font-family: "Open Sans";
src: url("/font/opensans.woff2") format("woff2");
}
body {
font-family: "Open Sans", sans-serif;
}@font-face {
font-family: Goudy;
src: url(https://yourwebsite.com/fonts/goudy.woff);
}
/* Now we can use the above font by referring to its font-family name */
p {
font-family: Goudy, serif;
}Tip: Giving a different name to custom fonts
However, you don’t necessarily have to use the actual font’s name (i.e. the name in the underlying font data) — you can choose a more contextual name for the font if you wish. So you could do this:
@font-face {
font-family: BodyText;
src: url(https://example.com/fonts/goudy.woff);
}
p {
font-family: BodyText, serif;
}