Adding, removing fonts from a theme

One request I often see in the forums is how to add, remove, and change fonts in themes. There are quite a few ways of going about it but ultimately depends on how the theme is not only using but loading the fonts. Core themes use a standard practice of creating an array, returning a URL created with add_query_arg(). Don’t get me wrong, I like that method. The only downside is it is inside of a pluggable function.

I’m not a huge fan of pluggable functions. What I am a fan of is filters and hooks. They are amazing!

Simply amazing!

The code

Okay, with that being said, what I like doing is creating a filter that a child theme can use or even a functionality plugin can use as well. In the following example I will load two fonts from Google. Yes, the most common font library used. Part of that reason is because they have a good API for their fonts. You can use your own but would require a different approach to the code.

So, onward!

function jmc_fonts(){
	$url = '';
	$fonts = array();
	$sets = apply_filters( 'jmc_sets', array( 'latin', 'latin-ext' ) );
	
	$fonts['lato'] = 'Lato';
	$fonts['crimson'] = 'Crimson Text:400,400italic,600';
	
	$fonts = apply_filters( 'jmc_fonts', $fonts );
	
	if ( $fonts ) {
		$url = add_query_arg( array(
			'family' => urlencode( implode( '|', $fonts ) ),
			'subset' => urlencode( implode( ',', $sets ) ),
		), 'https://fonts.googleapis.com/css' );
	}
	return $url;
}

Let’s break it down

Let’s take a look over the code a little bit.

We first define our function, in this case we prefix it with jmc and create a few variables. We then populate our $fonts array with the fonts we want to load. The $fonts variable is the array we want to be able to change. We do this by using apply_filters and passing it our created array of fonts. In this case the filter name is jmc_fonts.

If you look a little closer you can see we really created two filters. The first one is the jmc_sets that is a list of subsets to use. You can add or remove subsets almost in the same manner as the jmc_fonts. There is a slight difference in that you do declare the index number you want to remove. In the above latin would be $sets[0].

How to use

In a child theme’s function file, or your functionality plugin, you can now add, remove fonts to your liking. There are some people who like to use five fonts for their site. More power to them. So, let’s take a look at how we can use this, yeah?

add_filter( 'jmc_fonts', function( $fonts ){
	// add some fonts
	$fonts['ubuntu'] = 'Ubuntu:500,500';
	$fonts['merriweather'] = 'Merriweather:400,700';
	
	// remove the crimson since it does not suit design need
	unset( $fonts['crimson'] );
	
	// finally return new array
	return $fonts;
});

In the example, we are adding two new fonts, removing one, and finally returning the modified array. Pretty neat if you ask me. Now, this will only work with Google fonts the way it is currently coded. Do keep in mind Google has their own API for getting fonts so you need to know how that works and that is beyond the scope of this little guide so you will have to read up on your own.

Go. Create. Share!

One thought on “Adding, removing fonts from a theme

Comments are closed.