It’s no secret I’m a fan of the Utility Pro* theme. I’m using it for this website and my starter theme for clients. As a developer, one of the things I like is the modular approach Carrie took to structure her theme. By modular I mean the functionality is not in one, long functions.php file, rather it’s broken out into separate files containing like-minded logic. One of these modules,
includes/google-fonts.php is the subject of this tutorial today.
Using A Different Theme?
Never fear, if you are using a different Genesis child theme you can still use the code in this tutorial. To separate your Google fonts into a different module, create a new PHP text file with the content seen on the gist at the bottom of this post and populate it with the fonts you are using. Finally, add this snippet to the top area of your functions.php file so it knows to execute your new code. REMEMBER to adjust your path and filename accordingly:
As mentioned I love many things about this theme, however the default header font, Enriqueta, is not one of them so it had to go. And, while I was customizing the fonts, I swapped out another sans serif in case I changed my mind later. I love sans serif fonts and continually obsesses over identifying their differences. And, yes, I’m quirky that way.
If you have previously changed fonts in a Genesis* child theme, you will notice the code in google-fonts.php looks very different. In a nutshell, it is taking an internationalization approach and gives you the ability to turn fonts on or off if it doesn’t translate well in the target language. For more details on this technique, check out the source article referenced in the code comments:
This feature makes complete sense in a commercial theme for sale. However, since I’m customizing this theme for my services website as well as my starter theme for clients, it is not necessary. So, I won’t be using the translation on/off section, but I’m definitely keeping the array it builds with each font. Here is my end result:
For me, this is so easy to read. If I want to add a font, all I need to do is identify the font family name and weights supported on the Google font page, then add that entry to the array with
$font_families = . Most importantly you don’t have to touch anything else. The code following parses out the array and creates the long string you normally see when enqueueing fonts in WordPress themes.
The last step when changing fonts is to replace the old
font-family entries in your style.css file to the new names, or if you are using SASS, update your variables and/or partial files.
If you were hesitant to change fonts in the past, I hope these suggestions will get you experimenting with different looks. Keep going and font on!
* There are affiliate links sprinkled throughout this post.