web analytics

How to Customize your WordPress Theme – Advanced Tip

How to Customize your WordPress Theme - Advanced Tip

Questions in the comments on a blog are always great. It’s a marvelous chance to dive deeper into something. For instance: How to customize your WordPress theme.

Catherine’s question on WordPress Tips for Beginners is how to find or change a font of a theme. The answer is about fonts, but almost all other elements like color and sizes that use CSS (Cascading Style Sheets) can be changed this way. A website I consult often about CSS is w3schools. The explanation is good and there is a lot to find.

(PS I love Catherine’s website about Going Green!)

How to find what font is used in your WordPress theme?

When your cursor is in the text and you want to know the font, right-click your mouse and choose Inspect or Inspect element in the dropdown menu.

In Chrome and Firefox it looks more or less like these images. Sorry for the Dutch text. 🙂

Inspect is a great tool
Inspect is possible in both Chrome and Firefox

When you click Inspect a window at the right appears. Look for the box in the middle where it says html body #page etc with Styles beneath that. Find the text font-family. Maybe you have to scroll.
Also, make sure it is not striked through. Only one CSS rule can apply. If there is more than one rule, the other one will be disabled, marked with striked-out text.

As you can see in the images, on my website h3 is a serif font: Roboto Slab. The font of the body text is Roboto, a sans serif font.

Style lets you see what the CSS rules are
In Style you can inspect the CSS rules

How to change the font the easy way

If your theme is customizable it is simple to change the font. Go to Appearance > Customize and look for a tab called Typography. Some themes allow you to change the text, headings and subheadings. Other themes will just let you change the general font.

And some won’t let you change the font at all. You’ll have to use a CSS rule then.

Customize your theme

How to change the font with CSS

The last tab of the Customize menu is Additional CSS. (As you can see I have also changed the background color of the header and the colors of the navigation menu. That is also done in the Additional CSS tab.)

Additional CSS

It comes in handy if you know something about CSS, but it’s not absolutely necessary. With the help of Inspect you can come a long way. And you can’t ruin a lot by trying and removing. A big advantage of WordPress.

Go back to the Inspect > Style window and select the indicated font by double clicking it. Delete the selected area. You will see a drop-down menu with a number of choices, choose a serif or sans-serif. It doesn’t matter much, as long as it is different from what you had. The main reason to do this is to see a change so you know you picked the right item.

A remark about the indication serif and sans-serif

Serif and Sans-serif are not fonts. They are just general indications of a font that either has serifs or not. When this is indicated in your CSS the computer or browser of the viewer will decide which font is used. It is good practice in CSS when choosing a certain font that you add serif for a serif font and sans-serif for a sans-serif font.

If – for whatever reason – your chosen font is not available for the visitor of your site another font will be used. So the general look of the site will still be more or less as you desire if a font of the same ‘classification’ will be picked as your chosen font.

Look up the font
Change the CSS rule and see what happens
Check if changes have effect on the look of your website

Then what?

You can copy the whole CSS rule and paste it in the Additional CSS area. You can select and delete the line about the font-size (unless you want to change that as well). Make sure you leave the braces { } and the semicolons ; where they are as they are part of the CSS language.

Just be aware that not all fonts will display without extra code. Besides, your theme might also prevent the use of a font. Go to Google Fonts and choose the serif or sans-serif you want to use.

For example put in the Additional CSS:
font-family: “Verdana”, sans-serif;
or
font-family: “Georgia”, serif;

Select the whole rule
How to Customize your WordPress Theme

After publishing (blue button Publish) you can check with the Inspect tool if the font indeed changed.

In doubt?

Don’t hesitate to ask in the comment box for further clarification. And if it’s clear I would like to know as well. 🙂
Good luck

8 thoughts on “How to Customize your WordPress Theme – Advanced Tip”

  1. Hi Hannie,

    How strange. I was literally speaking with a friend only yesterday about customizing their wordpress theme.

    They had a beautiful theme for their website, although the font size and colour made it fairly difficult to read.

    We took the “easy option” as you’ve described above, however, the Typography method was limited to only 4 different font styles.

    I was aware of the CSS method, but due to a lack of knowledge and I guess the “fear factor” I have always avoided this.

    I’m afraid that if I somehow make an error that this will somehow impact on my website in general.

    Your tutorial definitely makes this very easy to follow and I think I may even be willing to give it a go.

    Thanks
    Partha

    Reply
    • Coincidence doesn’t exist, Partha 🙂
      I was also for a long time afraid for the Additional CSS and always worked with a child-theme. But that makes things far more complicated.
      Don’t be afraid to spoil anything. When it doesn’t give the result you want, your website is back to normal as soon as you delete all the added CSS.
      Good luck.

      Reply
  2. Wow, thanks so much for putting this article together.

    I thought that I was stuck with the fonts that were available with my theme in wp. I had no idea that I could have more choice by going to the css area.

    I’ve seen this area before, but I didn’t know that I could make changes there. I love the fact that I can change to color too.

    I’ll be making a few changes to my site now!

    Reply
  3. I have never been especially thrilled with the font in my theme but just thought it was what it was. I’m going to explore some other fonts.

    Question: In the header of my website, there is a place for a phone number. Can I eliminate that through Word Press?

    Reply
    • Hi Glen, it is possible, but more complicated because you have to address just that specific text.
      But check your customize tab, because sometimes themes have checkboxes where you can uncheck the use of telephone numbers.
      Let me know if I can help you.

      Reply
  4. Hi Hannie, Thank you for your response. That was a great answer to my question… you have provided me with a fantastic resource to go and research. Thank you and thank you for the mention!

    Reply

Leave a Comment