After moving back, I realized that I missed my custom fonts. They didn’t add anything functional of course, it’s just an aesthetic thing. Adding custom fonts was super-simple on WordPress.com, and if you want to add custom fonts to your self-hosted WordPress blog, there are plenty of plugins like Easy Google Fonts and Typekit Fonts for WordPress, but I don’t like to use plugins if I don’t have to. I kind of missed out on the technical aspect of the web font revitalization during my three years away, and was glad to find out that adding custom fonts without plugins was a lot simpler than I had thought.

First, you’ll need to decide if you’re just going to use Jetpack’s Custom CSS module or make a child theme. If you’re unfamiliar with child themes, I recommend just using Jetpack, though a bonus step at the end of this will require the use of a child theme. It is import that you use one of these two methods, because if you modify the parent theme files, you will lose your changes whenever the theme is updated.

Once you’re all set, you’ll need to select the fonts that you want via Google Fonts (because it’s simpler than the other web font directories) by finding them and choosing “Add to Collection.” Once you’re done, hit the “Use” button, and if you know what font styles and character sets you need, choose them, otherwise leave it as-is. Now, choose the “@import” tab under the “Add this code to your website” section, copy the code there, and paste it into your Jetpack Custom CSS Module or child theme’s style.css file. This blog uses Ubuntu and Open Sans, so my import line looks like this:

@import url(https://fonts.googleapis.com/css?family=Ubuntu|Open+Sans);

Simple, right? Now for the slightly more time-consuming part. You’ll need to open your parent theme’s style.css file, find every font-family declaration you want to change, add the selectors to your Jetpack Custom CSS Module or child theme’s style.css file, and add your new font as the font-family. It’s really not as difficult as it sounds. For example, I’m using Open Sans for the body-like text and Ubuntu for the heading-like text here, and it looks like this:

body, button, input, select, textarea, .site-description, #cancel-comment-reply-link {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, blockquote, .comment-author {
font-family: "Ubuntu", Georgia, Times, serif;
}

That’s all you need to do, just use either your Jetpack Custom CSS Module or child theme’s style.css file to import the custom fonts and replace them. You don’t really need an extra plugin for that.

As a bonus step, if your theme imports its own custom fonts via its functions.php file, you can dequeue them so that they no longer load (since you aren’t using them). To do that, create a functions.php file for your child theme (you will need a child theme to do this), and add a new function to remove the fonts. It varies depending on the theme, but this guide should help, and here’s what I did for Sorbet:

function sorbetchild_replace_scripts() {
wp_dequeue_style( 'sorbet-source-sans-pro' );
wp_dequeue_style( 'sorbet-pt-serif' );
}
add_action( 'wp_enqueue_scripts', 'sorbetchild_replace_scripts', 20 );

So, that’s all you need to do. Like I mentioned, it’s quite simple and the bonus step to remove existing web fonts isn’t entirely necessary. With that said, I’d like to give a big thanks to Kathryn Presner for pointing me in the right direction on this. Now, get out there and give your site some personality with a few new fonts!