WordPress really, really, really wants you to use Google Fonts. It actually wants you to use a small subset of Google Fonts, but without much hassle, you can set it up to where you can choose from their entire font library.

But what if you don’t want to use Google Fonts?

Don’t get me wrong; there are some perfectly good fonts in Google’s library. But I feel like people have sussed out what the good Google Fonts are, and so you tend to see the same few fonts on a lot of websites. This is obviously a problem if you want your site to stand out.

Now it’s true that content is king, and there are other ways of distinguishing your site visually, such as layout and color choices. But this just reinforces my point.

For those of you who are unfamiliar with managing a WordPress site, you make a lot of your visual changes through a tool called the Customizer. It’s where you select your colors and fonts and can also make some layout changes. With colors, there are a few suggested palettes, but it’s easy to put in your own custom color choices, as I have done with this site.

Font changes, however, are a much trickier business, and it’s not at all clear to me why. It’s worth noting that even within the limited set of Google Fonts available by default, there are some, shall we say, interesting aspects of handling typography in WordPress.

Screenshot of WordPress Customizer
Screenshot of WordPress Customizer.

I’m including a screenshot so you can see what I’m talking about. The first option is “Paragraphs.” The thing is that it only works on actual paragraph text, such as this. If I include a bulleted or numbered list, any font change doesn’t automatically apply to that, and indeed, there’s no option to change the font for lists.

Well, what about the different level headings? That seems straightforward enough, right? It turns out that those don’t always work the way you’d expect. For instance, the name of a site is usually considered a Heading 1, getting the <h1> tag in HTML. But just changing that setting won’t affect the display of your site name because your theme generally classifies it as a special type of Heading 1. To get the name of your site to display differently, you have to go into the CSS manually and set up a rule incorporating whatever class your theme assigns to the site name. And this is just sticking to the available default fonts!

As soon as you attempt to step outside the Google Fonts universe, you have other problems. I mentioned my struggles to some designers and developers I know, and they’ve encountered similar problems. There’s a 2014 blog post from WPMU Dev, a top WordPress theme and plugin development outfit, describing similar difficulties. Basically, anything that involved using outside fonts was clunky at best and non-functioning at worst.

It seems that if I actually want to display fonts from, say, Typekit or FontSquirrel, I have to dig into the CSS way more than I would like to do. It’s not that I’m incapable of tweaking the CSS as needed, mind you. The problem is that if I want to change themes, there’s a high probability I’ll have to do the process all over again, since different themes tend to have their own names for classes they add to elements.

I haven’t decided how I’m going to handle this yet. One of the developers I spoke to about my problem showed me a way that Drupal, a different CMS, seems to handle this sort of thing more effectively. Now he’s also been trying to get me to learn Drupal, so he’s a biased source, but it’s worth at least seeing if there’s anything to it. I already have a Drupal installation that I’m playing with, so I’ll try his suggestion and report my findings in a future post.

In the meantime, step it up, WordPress! You’re better than this!

Got any typography complaints of your own? Maybe you have a more general story about a feature (or lack thereof) that seems nitpicky but throws everything off for you? Vent your frustrations in the comments!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>