So you’ve finally found that WordPress theme that has everything you’re looking for. Great! There’s only one problem: you hate the font selection. Unlike text editors like Microsoft Word, WordPress font selections aren’t normally in plain sight. If you’re using a free WordPress theme, there’s a good chance that reaching out for support might not be an option. Fortunately, there are ways to figure it out on your own.
Finding the WordPress Font CSS
In the first section of the video we talk about how to find the WordPress font CSS code from the theme editor. Typically, you’ll be looking through the style.css file to find the typography section. All you need to do is find the text that starts with body and has “font-family” in a line, then copy the entire block to your clipboard.
In the video we used the default WordPress theme Twenty Seventeen. Under the typography section we find and copied the following code:
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
Pasting the Code & Modifying It
Past the code either into your child theme’s style.css file or in a custom CSS editor. Twenty Seventeen has one built in, but if your chosen theme doesn’t there are plugins you can use to provide the same functionality. Once you paste it in, you can experiment with modifying the values.
What the WordPress Font Settings Mean
In the example CSS code, you can see that the text classes of body, button, input, select, and textarea all have the same settings. That’s why they’re grouped together in the style sheet.
The settings for font-family indicate the fonts to be used in order of preference. For example, Libre Franklin is the first font the site will try to render. If that font isn’t available on the client computer, it will try the next one – Helvetica Neue. This happens down the list until an available font is found. You can replace these or simply add your font choice to the front of the list. You can also modify the WordPress font size, color, & weight by modifying the font-size settings.
It’s really that simple to change your font selections. There’s no need to go to a developer or move to paid theme if that’s your only roadblock. Enjoy playing with your new WordPress font choices!
Latest posts by Sharif Jameel (see all)
- How to Customize a WordPress Font | CSS (Video) - October 21, 2017
- Branding Your Business: Are You Missing Customers? - October 19, 2017
- Product Review: Jelly Comb 2.4G Slim Wireless Mouse - October 17, 2017