We’ll drill into some of the finer Thesis 2 controls now. Specifically, we’ll learn how to change font settings in the Thesis 2 Theme. Thesis 2 has raised the bar for providing a finer level of control of your website. Font settings can be changed for each section of your website. This includes your page body, posts, sidebars, header, and footer. Let’s get started.
From your WordPress Dashboard navigate to the Thesis 2 Skin Editor then click the CSS button. You are now in the CSS editor.
On the right side of the screen are all the Thesis 2 CSS Packages. While I haven’t checked, there is probably a CSS Package for every part of your site.
We will be working from these CSS Packages. I’m going to address the changing of Thesis 2 fonts for the following areas of your site:
For a great reference on CSS font properties check out W3 Schools font page.
Changing Thesis 2 Body Fonts
It appears that the Thesis 2 Classic Skin inherits it’s fonts from one place, the Body tag. CSS provides for inheritance. If a style is set at a higher level, then lower level tags can inherit that style. This is powerful for a couple reasons. One, you can change the font in one place and your entire site will change. Two, you can override styles at lower levels without affecting other parts of the site, allowing you to make targeted changes.
In the picture above you will see a Body Package. Click on the Body Package and a popup will open allowing you to make CSS changes.
The first view is the “Package” tab. You shouldn’t need to make any changes here. However, take note of the “CSS Selector”. We can use this to make targeted changes. We’ll see how in a minute.
Primarily we’ll work from the “Options” tab. Go ahead and click this tab.
You will now see “Font Settings” and “Text Color”. You can enter any hex color code here and it will change the color of the text on your site. Typically you want black but you can use white on darker sites. Or any contrasting color that is easy for your visitors to read.
Click the black arrow next to “Font Settings” and it will expand to show you 9 additional font settings.
You can click the drop-down for “Font” and choose from more than 30 different fonts. Notice that Thesis uses the Georgia font by default.
You can also choose to set Font Size, Line Height, and Font Weight. You will typically leave these alone in the Body Package. Thesis will automatically calculate these values for you based on the Golden Ratio.
Below you can see the rest of the font settings available without writing a single line of code or CSS.
Remember the CSS Selector above? We can use this to make changes as well. While Thesis provides a “Text Color” element we can accomplish the same thing with native CSS as shown below. Here we are changing the text to green instead of black.
You can use this panel to change any property within the body CSS tag. While I haven’t tested this, I imagine you could write any CSS here but you are better off limiting it to the “Body” tag only so you’ll know where all the Body CSS is found.
Changing Thesis 2 Post Fonts
Below you will see a package labeled “Post Styles”. This package controls the styling within a post. Posts are built inside the WordPress Loop. The “Loop” is what reads the database and prints our your posts. Using the Post Styles package you can control the look-and-feel of your posts without changing the rest of your site (such as the sidebar).
Click on the Post Styles package.
A popup will appear with similar controls as the Body package. Again, make note of the CSS Selector value.
Click on the “Options” tab. Expand the Font Settings by clicking the black arrow.
You’ll notice that there are less options provided here than in the Body package above.
No worries, you can use the Additional CSS tab to add whatever options you like. Notice that “.post_box” is the same as the CSS Selector above. In the example below I’ve added some padding using CSS box properties.
Changing Thesis 2 Sidebar Fonts
In the picture below you will see the “Sidebar Styles” package. This package will allow you to manipulate fonts and properties of sidebars.
Click on the Sidebar Styles package and a popup will appear. Note the CSS Selector name for reference in the Additional CSS tab should you need it.
Under the Options tab you will have the same type of font settings as the Post Styles.
Changing Thesis 2 Header Fonts
Referring to the CSS Packages picture at the top of this post, click on the “Header” package. Make note of the CSS Selector.
Again, you will see similar font settings as the Post Style and Sidebar.
Never fear, the Additional CSS tab is here.
Changing Thesis 2 Footer Fonts
Referencing the picture at the top of the post we’ll see the “Footer” CSS Package. Click it to change the Footer fonts. Note the name of the CSS Selector for use in the Additional CSS tab.
The Footer font options are the same as the Header.
We can use the Additional CSS tab to make additional changes.