How to Load Custom Fonts Using @font-face

@font-face is a rule in CSS that allows you to use custom fonts for the text on your website. These fonts can be loaded from an external server using the url() function or from the user’s personal computer on your website using the local() function.

@font-face enables website owners to provide their own fonts and removes the limitation of using only “safe” fonts, which are the ones commonly available on most people’s computers, such as Arial, Times New Roman, Georgia, and similar ones.

There is a relevant post to this article discussing loading Google Fonts locally from your server where the technique presented is done using font-face@ exactly as explained in this guide.

The @font-face Rule

Using the @font-face rule requires you to provide a path to a font file located on the same domain where the CSS file using this rule is located.

This is to ensure broad browser support without any interference. Thus, it’s understood that these custom fonts should be hosted on your own server, not an external one. (More on this below).

font-face@ Syntax and Usage

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}

Ideally, the @font-face rule should be defined in your main CSS file and at its most basic level, it should include the font-family and src properties. Here’s an example:

@font-face {
  font-family: Lato;
  src: url(/assets/fonts/Lato.woff2) format('woff2'),
       url(/assets/fonts/Lato.woff) format('woff');
}

Usually, you’ll find the font-face@ rules at the beginning of the CSS file.

The value of font-family will be the name you’ll use later when you want to apply the font to specific text on your site:

h1 {
  font-family: Lato, sans-serif;
}

Note that we provided two values for src, where the first value is for a newer format called woff2 which loads faster and has a smaller file size.

However, despite its widespread browser support, there are still some browsers without this support. Thus, we also provide a fallback option in the woff format, which has broader support. This should cover your bases. You can also provide additional fallbacks:

@font-face {
  font-family: Lato;
  src: url(/assets/fonts/Lato.woff2) format('woff2'),
       url(/assets/fonts/Lato.woff) format('woff'),
       url(/assets/fonts/Lato.ttf) format('truetype');
}

Don’t worry about providing fallbacks – the browser will load the first font it supports under the src property and won’t load the other fonts.

Font Styling and Weight Definitions

Beyond defining the font name and the path to font files, you can also specify specific properties for the font. The properties you can use include font-style, font-variant, font-weight, and font-stretch.

This option is particularly useful when there are multiple variations of a font under the same name. For example:

@font-face {
  font-family: Lato;
  src: local("Lato"),
       url(/assets/fonts/Lato.woff2) format('woff2'),
       url(/assets/fonts/Lato.woff) format('woff');
}
@font-face {
  font-family: Lato;
  src: url(/assets/fonts/Lato-LightItalic.woff2) format('woff2'),
       url(/assets/fonts/Lato-LightItalic.woff) format('woff');
 font-weight: 200;
 font-style: italic;
}

Now you can use the light version and italic version of the font for different HTML tags, like using the regular version for paragraphs and the light italic version for headings, for example:

h1, p {
  font-family: Lato, sans-serif;
}
h1 {
  font-weight: 200;
  font-style: italic;
}

Loading Fonts from the User’s Personal Computer

You can often combine url() and local(), so if the font exists on the user’s computer, the browser will use it; otherwise, it will download the fallback font from the URL you specified. For instance:

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(/assets/fonts/Lato.woff2) format('woff2');
  font-weight: bold;
}

So, you can also enable this feature on your server if you want to use fonts that are available on other sites or subdomains.

The way to enable this on Apache servers looks like this:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff|woff2)">
	Header set Access-Control-Allow-Origin "*"
</FilesMatch>

And for Nginx servers, it’s like this:

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)|(woff2)$){
	add_header Access-Control-Allow-Origin *;
}

That’s it.