To use webfonts, you need to understand how to serve them. Third-party services such as Adobe Fonts and Google Fonts make embedding fonts effortless. You select the fonts you want, copy and paste a stylesheet link to your HTML document, and then refer to the fonts in your CSS. While Adobe Fonts gives you access to thousands of typefaces, you will be locked into an Adobe’s subscription for as long as you want to use those fonts. On the other hand, Google Fonts hosts only open-source typefaces, but Google collects, stores, and uses end-user’s data. As a result, the preferred method is to host webfonts on your own server along with your website. Whether licensing from a type foundry or using an open source, self-hosting your font files gives you reliability, independency, and privacy. As browsers continue to improve their font-rendering methods, hosting your own font files has become less intimidating.

To use the @font-face rule for self-hosting, you simply define webfonts in your CSS:

	
@font-face {
  font-family: 'Spectral'; 
    src:
      url('spectral-regular.woff2') format('woff2');
}
	

Font Family

In an @font-face rule, the font-family property declares the name of the typeface. In the example above, Spectral, by Production Type, is the font name and the src property instructs browsers the location of the font file (spectral-regular.woff2).

Font Formats

Today, the three widely supported formats for webfonts are Web Open Font Format 2 (WOFF2), Web Open Font Format (WOFF), and TrueType (TTF). For modern browsers, I recommend serving woff2, which has 30% reduction in file size over woff. Include woff and truetype only if you need to support older browsers.

	
@font-face {
  font-family: 'Spectral'; 
    src:
      url('spectral-regular.woff2') format('woff2'),
      url('spectral-regular.woff') format('woff'),
      url('spectral-regular.ttf') format('truetype');
}
	

Font Style

The font-style property specifies the style of the font family, which can be normal, italic, or oblique.

	
@font-face {
  font-style: normal; 
}
	

Font Weight

The font-weight property defines the weights, which can be specified in numerical value or keyword: 400 or normal, 700 or bold, and 900 or black. I recommend using specific numerical values: 100–900.

	
@font-face {
  font-weight: 400; 
}
	

Font Display

The font-display property determines how a typeface is displayed: auto, block, fallback, optional, or swap. In most cases, I recommend using swap to tell browsers to display text with fallback font right away and then swap to custom font as soon as it loaded.

	
@font-face {
  font-display: swap; 
}
	

Here’s the final CSS to serve your font file:

	
	
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap; 
    src:
      url('spectral-regular.woff2') format('woff2'),
      url('spectral-regular.woff') format('woff'),
      url('spectral-regular.ttf') format('truetype');
}
	

Using Webfonts

With the font file defined, you can apply it to your text in CSS:

	
	
body {	 
  font: 100%/1.5 'Spectral', serif;  	
}	
	

The shorthanded font property lets you specify the font size (100%) and the line height (1.5) of the font. The name of the font, Spectral, is referred back to the @font-face declaration. The keyword serif is added to specify the default fallback font if Spectral had not fully loaded or failed to load.

To get the source code for this demo, head over to the download page.