How to change fonts in WordPress using Firebug

How to change fonts in WordPress using Firebug

The bug that solves problems!

This a beginners guide on how to change fonts in WordPress using the browser addon, Firebug.

Using this tool and a custom CSS plugin you’ll learn how to change the styling of the typography on your WordPress site.

CSS, also known as a Cascading Style Sheet, controls the look and feel of a website and can also determine layout as well. More on CSS here.

NOTE: If you want this kind of control over your site’s look and feel in an easy-to-use interface, you might want to consider a premium theme.

What is Firebug?

Firebug is an invaluable tool for any web developer.

It allows you to look under the hood of any website in order to make changes, or just to discover how the site works.

How to change fonts in WordPress using Firebug

1. Install Firebug for either Firefox or Google Chrome.

For this guide we’re going to be using Firefox.

2. Install the PC Custom CSS plugin.

Visit Plugins >> Add New and enter “PC Custom CSS” into the search bar.

After activating the plugin, navigate to Appearance >> Custom CSS. This is where we’re going to paste in our styling changes, whether it’s increasing the size of certain fonts or changing the layout and colors.

PC Custom Settings plugin – WordPress

3. Use Firebug to find the element you want to change.

Keep the PC Custom CSS window open and launch the page you want to change in a new tab. We’re going to refresh everytime we click the Save button to make sure our changes are working.

Right-click on the element on the page that you want to change and select Inspect Element with Firebug.

Inspect Element with Firebug drop-down

For this first example we’re going to increase the size of the font in the navigation menu in the Twenty Ten WordPress theme.

A window is going to pop-up from the bottom of your browser that looks like this:

Firebug – HTML vs CSS window

On the left is the HTML, and on the right the CSS that is applied to the element you currently have selected.

You’ll notice that as you move your mouse over different elements on the left hand section they will highlight in the main window above. Firebug is showing you which part of the page you’re hovering over.

Highlight the <li> element so that the menu item becomes highlighted:

Navigation Twenty Ten

4. Change the element inside the live Firebug window until you see the effect you’re looking for.

In the CSS panel look at the top and you’ll see the styling for the element you’ve just highlighted.

Double click inside that area and a field will open up.

Enter in the first field the exact term ‘font-size’. Firebug will help you out by attempting to auto-complete style names.

Press the TAB key and in the second field enter the exact term ’20px’.

Firebug changes

The moment you enter this value you should see the navigation menu get bigger like so:

Larger navigation menu

5. Copy the edited CSS element into the PC Custom CSS window and click the Save Changes button.

Custom CSS changes

6. Refresh your page to make sure that the edits are taking effect.

NOTE: The changes you see in the Firebug browser window are not live on your site until you paste in the CSS and save.

Changing the body copy

1. Make sure that a section of your main pages body text is highlighted in Firebug.

Highlighted body text

2. Find the corresponding CSS element at the top of the window. Enter in ‘font-size’ : ’16px’ and you should see the font size of the main page increase instantly.

To change the type of font, create a new element called ‘font-family’ and enter ‘arial,helvetica,sans-serif’ or any other set of fonts in that you want.

Here is the CSS for editing the body font in the Twenty Twelve theme:

#content p, #content ul, #content ol, #content dd, #content pre, #content hr {
font-family: arial,helvetica,sans-serif;
font-size: 16px;
margin-bottom: 24px;
}

And how it appears on the live site:

Sample Page - Arial

If I wanted to make the body copy a maroon color (why?) I would add:

color:#910F43;

Heading Tags

In the WordPress editor you can apply header tags to your text. They are used to accent keywords as well as draw special attention to certain elements and increase readability.

Header Tags - WordPress editorHeader 1 is created by the title of your page or post and so isn’t generally used in the editor, but all the others, all the way to a Header 6 tag can be used as much as you like, with Header 2 reserved for your keywords or big statements you want to make.

This gives your site a clear set of font variations and styles that can be changed sitewide through the CSS file, rather than editing them within individual posts.

On this website the H3 headers are in red and the H2 are large and are used for reinforcing the main focus of the article.

How to edit the styling of your header tags

1. Create a page or visit one that uses the Header tag you want to edit.

2. Isolate the correct Header tag.

Right-click the Header 2 tag (in this example) and choose Inspect Elements with Firebug. Make sure that the right element is highlighted in the main window.

Highlighting the Header 2 tag - WordPress

Click to enlarge

3. Create a new rule for the element if required.

Notice in the CSS window on the right, there is no one rule applying to only the H2 Header. Instead there is a series of rules applying to all the header tags.

We will need to create a new rule from the relevant one, so that our edits only apply to the Header 2 tag  in this case.

In this case we need to copy the #content H2 rule from the list like so:

Isolating the Header 2 Tags

Then right-click inside the right-hand window and choose Add Rule…

Firebug – Add Rule

Paste in the code:

#content h2

4. Edit the Header tag within Firebug.

Now you can add all the typography styling outlined in the CSS cheat sheet, color picker and the web-safe fonts list below until they look the way you want.

In this example I’ve gone a bit OTT just to show you some of the styling that is possible:

Header 2 styling example

The CSS for this being:

#content h2 {
background: none repeat scroll 0 0 #EDEDED;
border-bottom: 1px dotted grey;
border-top: 1px dotted grey;
color: #A66E14;
font-family: arial;
font-size: 38px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px #555555;
}

5. Copy this styling to the PC Custom CSS window and save.

Refresh your site to make sure that the styling changes we have made are sticking.

CSS Resources

I hope you found this an accessible guide to editing some of your website’s fonts. Read about some common typography mistakes.

If you would like to help improve this article please leave a comment with your question or issue. Thank you! :-)

photo credit: Stewf via photopin cc

One Response to “How to change fonts in WordPress using Firebug”

  1. jsherk April 28, 2013 at 12:52 pm #

    Awesome article! I spent a couple hours trying to find an easy way to make live real-time changes to my WordPress theme.

    This would be perfect if we could add an option the the Firebug right-click menu that said “copy and paste directly into PC Custom CSS”.

    Thanks for this article!!! :D

    Here are some tags that I was searching for but could not find what I wanted. Maybe these will help others find this post:
    modify theme live
    modify theme real time
    modify theme css live
    modify theme css real time
    modify css live
    modify css real time
    change theme live
    change theme real time
    change theme css live
    change theme css real time
    change css live
    change css real time

We'd love to know your thoughts...