How to Customize your WordPress Theme, 3 Advanced Tips

How to Customize your WordPress Theme, 3 Advanced Tips

Questions in the comments on a blog are always great. It’s a marvellous 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 that a theme uses.

The answer is about fonts, but almost all other elements like colour 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.

Customize your WordPress theme

Even if you don’t understand the specifics of CSS completely, it’s doable to customize your WordPress theme yourself in the present WordPress version.

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. 🙂

Inspecting in Chrome
“Inspect” in Google Chrome.
Inspect in Firefox
“Inspect” in Mozilla 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 struck through. Only one CSS rule can apply. If there is more than one rule, the other one will be disabled, marked with strike-through text.

As you can see in the images, on my website the heading 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 (Chrome).
Style lets you see what the CSS rules are
In “Style” you can inspect the CSS rules (Firefox).

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
Customize the 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 colour of the header and the colours 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 differs from what you had. The main reason to do this is to see a change so you know you picked the correct 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 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
Look up the font.
Change the CSS rule
Change the CSS rule and see what happens. Here a sans-serif is shown.
Different look
Check if changes have an effect on the look of your website. Here a serif is shown.

Then what?

You can copy the whole CSS rule and paste it into 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
Select the whole rule and copy it.
Customize your WordPress Theme
Customizing 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 if necessary. And if it’s clear I would like to know as well. 🙂
Good luck!

8 thoughts on “How to Customize your WordPress Theme, 3 Advanced Tips”

  1. 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
  2. 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
  3. 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
  4. 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

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.