Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 51: How to change fonts using Thesis 2

Thesis 2 Font CSS

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.

Thesis 2 CSS Page

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.

Thesis 2 CSS Packages

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:

  • Body
  • Post
  • Sidebar
  • Header
  • Footer

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.

Thesis 2 Body Font CSS

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.

Thesis 2 Body Options

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.

Thesis 2 Body Font CSS Options

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.

Thesis 2 Body Fonts List

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.

Thesis 2 Body Font CSS Options 2

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.

Thesis 2 Body Additional CSS

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.

Thesis 2 CSS Packages

A popup will appear with similar controls as the Body package.  Again, make note of the CSS Selector value.

Thesis 2 Post Styles CSS Package

Click on the “Options” tab.  Expand the Font Settings by clicking the black arrow.

Thesis 2 Post Style Font CSS

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.

Thesis 2 Post Style Additional CSS

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.

Thesis 2 CSS Packages

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.

Thesis 2 Sidebar Styles CSS Package

Under the Options tab you will have the same type of font settings as the Post Styles.

Thesis 2 Sidebar CSS Options

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.

Thesis 2 Heading CSS Package

Again, you will see similar font settings as the Post Style and Sidebar.

Thesis 2 Heading CSS Font Options

Never fear, the Additional CSS tab is here.

Thesis 2 Heading Additional CSS

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.

Thesis 2 Footer CSS Package

The Footer font options are the same as the Header.

Thesis 2 Footer CSS Options

We can use the Additional CSS tab to make additional changes.

Thesis 2 Footer Additional CSS

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 7 comments… add one }
  • mark March 12, 2013, 2:23 PM

    First, terrific series… Without your guide, Thesis 2 would be totally unusable! DIY “spit the bit” on the documentation/how to use front. They should be ashamed!

    Regarding setting the font size—if the above “Font Size” boxes are blank…, where is Thesis setting the overall font size(s)? I want to adjust the body and post font size [make is smaller, it is too large stock] in that spot, or in some manner where the “Golden Rule” draws/calculates the values.

    Also, if I want to place my Privacy Policy and Terms of Service statements as click-on links in my footer…, how would I do this? I don’t want to set them as “Pages…” Would I make them a post and just link to them, or is there a more stealth/tricky/hidden/smarter way to accomplish this?

  • Doug Macklem March 14, 2013, 3:36 PM

    The way I understand it, font size will be calculated based on the space available. It is built into Thesis 2 according to this page: http://diythemes.com/thesis/thesis-2-web-design-decisions/

    You can override it in the CSS Packages for “Body” and “Post Styles”. You should also set the following property to help it calculate the right values. “Typography: Enter Width of Text Area”. This property can be found under Post Styles at the bottom of the Options tab.

    If you check out Step 30 you can see how to place the links to your privacy policy and TOS in the footer (like you see on this site). I would create a WordPress “Page” (not a post). You can link the page and it won’t show up in your site navigation. Pages and Posts are really the same output but posts show up in your blog listing where pages don’t.

  • Mark March 14, 2013, 11:41 PM

    Doug,

    Thank you—this is very helpful. To reiterate, this series is a godsend, please keep it going…

  • Doug Macklem March 15, 2013, 7:18 PM

    Thanks Mark! The material never seems to end so I plan to charge ahead.

  • Allison April 19, 2013, 9:24 AM

    Just bought Thesis this morning and I’m glad to have found such a great resource for figuring it out. Thanks!

    Do you know if there’s a way for me to upload fonts so I can go beyond what Thesis integrates?

  • Doug Macklem April 19, 2013, 2:26 PM

    Allison: I’m glad you like the site. DIY themes has a tutorial for adding Google fonts here: http://diythemes.com/thesis/rtfm/how-to-add-google-fonts-thesis-2/

Leave a Comment