Quick guide to using webfonts

Quick guide to using webfonts

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 standard .WOFF2 is sufficient, so adding self-hosted webfonts has neved been easier.

WOFF2 has currently a global support of 83.98%. It’s supported in all browsers, exceptions being only Internet Explorer and mobile browsers Blackberry Browser and UC Browser for Android.

Using self-hosted fonts

So how to add them? Presuming 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');
}

.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, Blackberry Browser and UC Browser for Android 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('fontfilename.woff') format('woff');
}

NOTE: make sure you always add .WOFF2 first.

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.

Useful links and resources

Check current .WOFF and .WOFF2 browser support (caniuse.com)

Using webfonts from Google Fonts

Choose and select the desired font family from the Google Fonts library.
If you are browsing the complete list, click on the plus icon to select:

 Google Fonts — select font from list

Or click “See specimen” to go to the font’s page.

 Google Fonts — single font page

On the font’s page click “Select this font”. A popup will appear in the lower right corner from where you can customize your font kit. Click on “Customize” to choose the desired font weights and styles, as well as the desired language subset.

 Google Fonts — customize font kit

After that return to the “Embed” tab and copy your link in , like it’s mentioned.

Google Fonts — embed font link

Once embedded, you can use the font in the css file

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.

An original article about Quick guide to using webfonts by FontsArena.com · Published in Web Typography

Last update: