How to Customize a WordPress Font | CSS (Video)

wordpress gears
Image by Tumisu from Pixabay

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:

textarea {
color: #333;
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.66;

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!

share this article:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on whatsapp

Leave a Comment

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

If you found this article useful, please consider helping us out and subscribing to our mailing list. We won’t spam you. We rarely send more than a few emails each year and you can always unsubscribe.


* indicates required
/ ( mm / dd )

share this article:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on whatsapp
Scroll to Top

This website uses cookies to ensure you get the best experience on our website. We'll assume you accept this policy as long as you are using this site.