Last updated on July 7th, 2024 at 10:51 am
Here's a short little CSS lesson on changing fonts in a WordPress theme.
This post may contain affiliate links. We may earn a commission if you purchase an item through our links. It costs you nothing and helps us to fund this blog. Please see our Affiliate Disclosure & Notification for details.
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:
body,
button,
input,
select,
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!
Sharif Jameel is a business owner, IT professional, runner, & musician. His professional certifications include CASP, Sec+, Net+, MCSA, & ITIL and others. He’s also the guitar player for the Baltimore-based cover bands, Liquifaction and Minority Report.
Pingback: 4 Characteristics of an Attractive eCommerce Website - Website Design Baltimore | SEO Baltimore | CGS Computers