How to Customize a WordPress Font | CSS (Video)

Get Facebook Chat Updates for Zesty Things: cancel anytime by typing 'stop' in the chat window

 

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 copy 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 a paid theme if that’s your only roadblock. Enjoy playing with your new WordPress font choices!

 

The post How to Customize a WordPress Font | CSS (Video) appeared first on CGS Computers.

 

Get Facebook Chat Updates for Zesty Things: cancel anytime by typing 'stop' in the chat window

Add a Comment

Close