How to Add More Google Fonts to the Pearsonified Skin

By default, the Pearsonified Skin ships with Google Fonts suitable for use in primary content—that is, they contain 400, 400 italic, and 700 (bold) styles.

Of course, not all typographic scenarios require those 3 styles, and you might wish to use one of the other hundreds of Google Fonts for headlines, your nav menu, or even your site title.

To add any Google Font to the Pearsonified Skin, you’ll need to add a special array filter to the Skin’s custom.php file, which you can find here:

wp-content/thesis/skins/pearsonified/custom.php

Open up that file with the text editor of your choice, and then add:

function add_google_fonts($fonts) {
	$fonts['Roboto Slab'] = array(
		'name' => 'Roboto Slab',
		'family' => '"Roboto Slab", serif',
		'styles' => '300,700');
	return $fonts;
}
add_filter('thesis_pearsonified_google_fonts', 'add_google_fonts');

In the above code, you should replace every instance of Roboto Slab with your chosen Google Font. In addition, you’ll want to change the styles parameter to load only the styles you need (and are offered with your chosen font).

The syntax for the styles parameter is simple. Every included style is separated by a comma (but no space!); normal and bold styles are indicated by numbers (which represent weights); and italic styles are represented like this, 400italic, a weight followed by an indication that you want the italic style.

In a final example, let’s say we want to use Roboto Slab 300 and Muli 300 and 300 italic. Here’s what your filter would look like:

function add_google_fonts($fonts) {
	$fonts['Roboto Slab'] = array(
		'name' => 'Roboto Slab',
		'family' => '"Roboto Slab", serif',
		'styles' => '300');
	$fonts['Muli'] = array(
		'name' => 'Muli',
		'family' => '"Muli", sans-serif',
		'styles' => '300,300italic');
	return $fonts;
}

If you’ve successfully added your Google Fonts, they will be available in the font selectors in the Design Options. In addition, if you supply a family parameter in your filter (as is shown above), your chosen font will be added to the Skin’s CSS without you having to lift a finger. Sweet!