How to use web fonts

This is a quick guide on how to add and use fonts to websites, covering multiple options like self-hosted, Google Fonts library, and properly adding webfonts in WordPress.

Gone are the days when we had to embed a lot of proprietary formats for different browsers like .EOT for Internet Explorer and .SVG for Safari. Now the newest .WOFF2 font format is sufficient, so adding self-hosted webfonts has neved been more straight-forward.

~~As of January 2020, WOFF2 has a global support of 93.66%.~~ Update: As of July 2021, WOFF2 has a global support of 96.14%. It’s supported in all browsers, with the only exception being Internet Explorer.

How to use self-hosted webfonts

Self-hosted fonts means you use your own font files, not from a library like Google Fonts or Adobe Fonts. To use them, you will have to declare them in your css file, using @font-face. Assuming that you saved your fonts in a directory/folder named “fonts”, include this at the beginning of your css file:

@font-face {
  font-family: 'Font Name';
  src: url('fonts/fontfilename.woff2') format('woff2');
}

If your font files are located elsewhere, replace fonts/ with the path to your files.

.WOFF2 will work in Chrome, Firefox, Opera, Safari, Edge (yes, even Edge), as well as mobile browsers (iOS Safari, Android Browser, Opera Mobile, Chrome for Android, Samsung Internet, QQ Browser, Baidu Browser)

However! If your project must have support for Internet Explorer, you will have to also include the older standard .WOFF files. So your css declaration will become:

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

NOTE: make sure you always add .WOFF2 first.

If you don’t have a .WOFF2 file include only the .WOFF declaration.

@font-face {
  font-family: 'Font Name';
  src: url('fonts/fontfilename.woff') format('woff');
}

That’s it, you’ve successfully embedded your fonts. Now all you need to do is use the fonts, for example:

body {
  font-family: 'Font Name', sans-serif;
}

If your font is a serif, add as fallback serif instead of sans-serif.

Using webfonts from Google Fonts

Step 1: Select the desired font family from the Google Fonts library by clicking on it.

Step 2: On the font’s page select the font variants you want by clicking on the “+ Select this style” buttons.

Step 3: A popup will appear in right side of the screen.

You can remove or add more font styles as desired. Copy the <link> embed code and paste it into the <head></head> section of your website’s html code. This will create a request for the fonts, and they are ready to use.

Alternatively, you can copy the @import code and paste it at the beginning of your css file. Do not copy both, as it will create superfluous duplicated requests.

Step 4: Once the embedding or import code is in place, you can call the font in the css file where it’s needed, for example:

body {
  font-family: 'Roboto', sans-serif;
}

(Replace “Roboto” with your font’s name).

Properly adding Google Fonts in WordPress

Correctly adding fonts in a WordPress theme is not as easy.

If you want to properly add fonts from Google Fonts in your WordPress theme, DO NOT just copy-paste the embedding link in like for simple html. Instead, copy only the url ( for example https://fonts.googleapis.com/css?family=Roboto:300,400&subset=latin-ext).

The url will have to be added in your theme’s functions.php file, in the enqueue_assets function in which all your css and javascript files are embedded. Please note that usually functions are prefixed, so the actual function might be called something like yourthemename_enqueue_assets. In the example below, I used fa_enqueue_assets (fa prefix being short for fontsarena).

So your function will look something similar to this:

function fa_enqueue_assets() {
	// CSS
	wp_enqueue_style( 'fa_style', get_stylesheet_uri(), array(), '1.0' );

	// JS
	wp_enqueue_script( 'fa_example_js', get_template_directory_uri() . '/assets/js/example.js', array( 'jquery' ),'1.0', true );
}

Add your Google Fonts url just below the theme’s main css file:

function fa_enqueue_assets() {
	// CSS
	wp_enqueue_style( 'fa_style', get_stylesheet_uri(), array(), '1.0' );
	wp_enqueue_style( 'fa_google_fonts', 'https://fonts.googleapis.com/css?family=Roboto:300,400&subset=latin-ext', '1.0');

	// JS
	wp_enqueue_script( 'fa_example_js', get_template_directory_uri() . '/assets/js/example.js', array( 'jquery' ),'1.0', true );
}

Note that in the example above 1.0 represents the version, and in your case it might be different, or even defined as a constant.

Replace fa_ with your theme’s prefix.

Now the fonts are ready to use.