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!

Theme Review tips, tricks, and take aways

WordPress theme reviews are:

  • Fun
  • Entertaining
  • Demanding
  • Awesome
  • Time consuming

There are more but those are the ones that came to mind first. The last one is the one I really want to focus on the most and there is a reason for it. Recently, the review team posted a call to tips on theme reviews. I chimed in and now I feel a little more compelled to expand a little more on my personal site.

I’ve been doing reviews for quite some time and have got quite a few reviews under my belt. Currently about 2,600 that have my name attached to them. Yeah. Safe to say I’ve looked over a lot of code over the years. I have loved every single moment because I love knowing that I have helped out not only one person but an entire community by doing what I do. I am looking forward to being able to make more videos down the road to help others.

So, onward!

Tips

The biggest tip really is get your testing environment setup. My review setup is a little odd. I use Windows 7 as well as OSX 10.9.5 with VVV, Variable VVV, and the development subversion repository to test all themes. Yes, I like to live dangerously. The plugins I use are:

Active plugins

Extra plugins

As you can see I use quite a few plugins and each serve their own purpose. The extra plugins are not always active when I conduct my reviews. I only activate them when I want to try to break the theme or see if it does break.

A great tip is to always look at how core does things. Knowing how core works helps you out in knowing when a theme is creating too much content or even when it comes to explaining to an author how to better improve their theme.

Tricks

Now, the browser is Chrome and my editor of choice is Brackets. I got used to working with it and haven’t tried much else. Was never a fan of IDEs because I grew up looking at the markup in Notepad. Yes. Notepad. We all started out somewhere. I do like using the “Find in Files” feature and regular expressions to looks for certain things within the theme. I setup a few rules so it doesn’t search certain files or folders though the folder restriction is when I’m looking for core code and inline documentation.

regex-search

That’s great and all but that doesn’t really show much else. When I post a comment on the ticket and let the author know I often use one of two methods of letting them know what is still in need of fixing. The first template outlines the requirements and I bullet out what in particular needs to be addressed.

= Required =
Note all required items that theme needs to fix before theme can be approved

== a11y ==

== Code ==

== Core/Features ==

== Plugin Territory ==

== Documentation ==

== Language ==

== Options/Settings ==

== Styles/Scripts ==

= Recommend =

The second:

= Required =

=== header.php ===
* missing translation [L4,l6,L10]

=== functions.php
* plugin: `add_filter( 'show_admin_bar', '__return_false' );` please remove

= Recommend =
* The red on the navigation makes it a little hard to read some of the menu items, consider a darker shade or use a lighter text color

I have always liked using the second method because it forces me to go file by file. That is the reason it can take a long time to review a theme. Even more when some include frameworks. That’s files and folders to look over.

Take-aways

The biggest gain, of course, is that I’ve learned a lot about how WordPress works and how themes are created by many.