How to change the fonts on your WordPress blog theme
Do the fonts on your free WordPress theme cause you to puke in your mouth a little every time you look at them? Or maybe you are just tired of looking at the same fonts and need something new. In either case, this guide is for you.
The truth is, fonts are like hats. Some hats are very ugly hats.
So let’s go hat shopping!
But first: let’s take a look at some of the different HTML tags that markup the different formats of text on your WordPress blog. You need to know the different HTML tags so that you will be able to identify them in your blog’s stylesheet and then change them appropriately. Never mind if that doesn’t make sense to you. Just keep reading.
A list of HTML tags used for text on WordPress blogs
- <H1> – This type of type (if you will) is used for the largest most important headings on your blog. The heading tags are ordered numerically to identify prominence. The heading tags with the lowest number are the most prominent. Generally, the H1 tags (or H2) will be used for the titles of your blog posts.
- <H2>, <H3>, <H4>, <H5>, <H6> – These tags are all heading tags, having lower hierarchical value the higher the number. H3 and beyond are generally used as sub-headings or small headings.
- <p> – The <p> tag or paragraph tag is what HTML uses to markup paragraphs. The text that you are reading is enclosed within <p> tags and 99.99 percent of WordPress blogs will use the <p> tag (the other .01 percent were designed by three-year-olds).
- <blockquote> – Can you guess what this tag is used to markup in HTML? Yes, that’s right: block quotes. Block quotes are essentially large chunks of text quoted from other sources.
- <ul> – The unordered list tag is used to markup non-numbered lists in your blog posts.
- <ol> – The ordered list tag is used to markup ordered lists in your blog posts.
Those are the most commonly used text markup tags. There are others (like preformatted and address tags) but it is unlikely you will encounter any others being used on a WordPress blog.
Jumping into your theme’s style.css
Now that we know what the different forms of type on your blog are identified as or markedup as, we can look for them in your theme’s style.css file. Style.css basically contains all of the styles for HTML elements on your page.
Translation: It changes the appearance of everything on your blog, including the text.
To access your theme’s style.css file, simply click on the Editor button under the Appearance tab in the WordPress control panel. Then click Stylesheet (style.css) which is located on the bottom of the right-hand sidebar.
You should see a list of styles containing blocks of code that each look like this:
body {
font-family: Georgia, serif;
line-height:1.6em;
font-size:.85em;
color:#111111;
text-align:center;
background:url(‘images/header-bg.png’) repeat-x;
background-color:#ecf0d9;
}
The above chunk of code is the styling for the body tag (everything in between <body> and </body>) of your WordPress blog. That means that whatever styles you appropriate in this chunk of code will be applied to the entire body of your blog.
Generally, when you style something for the body tag (font-style for example), it will be inherited by everything within the body, including the dividers, paragraphs, headings, etc. There are some styles that, when used on the body tag, will only apply to the body tag and will not be inherited by elements contained within the body tag. An example is the background style which, in the above code, is set to: url(‘images/header-bg.png’) repeat-x;.
CSS applies styles by adopting inherent values for HTML elements; or by selecting HTML elements either by location, class or id.
Confused? Don’t be.
All you need to understand is that the styles for HTML elements (including font styles) are contained within your Style.css file. Those styles are changed either by location, class, id or inherited values.
Styles assigned using the class selector will look like this in the CSS:
div.postarea {
with a bunch of code in here
}
The “.” signifies a class. Classes are used in CSS to style multiple elements either on one page or across the entire site. IDs are used in CSS to style single HTML elements either on one page or across the entire site. An ID will look like this:
div#postarea {
with a bunch of code in here
}
Translation: Style the div that is IDed with the name “postarea” with these lines of code.
When the styles for an element are changed using location, the code will look like this:
div p {
with a bunch of code in here
}
Translation: Change the styles for all paragraphs within dividers.
The CSS code for Styles changed by location can also look like this:
div.postarea #top {
with a bunch of code in here
}
Translation: Change the styles for every element IDed as “top” within the divider that has a class of “postarea.”
Default styles and inherited values
When you style an element with CSS that contains another element within it, the element (or elements) will inherit those styles. For example, if I give the style font-size: 12px; to a divider, it will be inherited by paragraphs (<p>) placed within it.
Many style sheets will contain the default styling for all the elements on the website in the first blocks of code.
h1,h2,h3,h5,h6 {
font-family:Georgia;
padding:5px 0;
font-weight:normal;
}
This chunk of code defines the font family Georgia with a padding on the top and bottom of 5 pixels and a normal weight. This code is considered default styling because there is no location, class or ID specified. If a location, class or ID were specified in a different chunk of code, the default values you see here would be overridden.
For each line, the code that precedes a colon (:) represents a property and the code after the colon represents the value of a property. Font-family is a property and its value is Georgia.
Changing the property values for fonts in style.css
The only properties that will be relevant for changing fonts include:
- font-family
- font-size
- font-style
- font-weight
There are other properties for changing the style of fonts but those are most likely the only properties you will come across on a WordPress theme that deal with fonts. To see a complete list of properties for fonts, check out this page.
Now that you understand how the text on your blog is targeted by CSS to change the styles, you can proceed to change the styles for the elements you want. Let’s change the fonts for the paragraphs which will make up the bulk of the text on your blog.
Look in your style.css for a default p element. This will simply be a p followed by two brackets containing properties and values for that element.
p {
properties and values in here
}
If there is no default styling for p, just look for the styling for the p element being defined elsewhere in style.css. You may find the p element styled within the class for a divider (div) which will look like this:
div.nameofclass p {
properties and values here
}
You will most likely find a single divider that styles paragraphs on your blog or you may find the style for paragraphs across your blog being defined by a default p.
Once you have identified the chunk of code that assigns styles for p, change the font values to your liking. You may want to increase the font-size: 12 value to font-size: 14. You may want to change the font-family from Georgia to Times New Roman. Whatever the case is, make sure that you do not delete the semicolon placed after each value. That will most likely fudge all of the styles on your blog.
If you are looking to change the paragraph fonts on your entire blog, you should search for every occurrence of “p” in your style.css file. You can do this fairly easily with a browser search command (CTRL-F). Remember that some of your p font styles may be defined differently for different HTML elements.
For example, you may have a sidebar that has paragraphs within it that are styled differently from the paragraphs in your post area. You must be thorough if you want to change the p styles for every element on your blog.
The same applies for every element that formats text on your blog, including: headings (H1, H2, H3, etc.), blockquotes (blockquote), unordered lists (ul) and ordered lists (ol).
You should now be able to change the font styles for every element on your blog! The only exception is if the theme you are using uses in-line styles contained in your template files. If that’s the case then you’re pretty much screwed … Just kidding of course.
Just leave a comment and I will help you out if you are having any difficulty!
Related posts
Tags: css, html, styles, themes
