Thesis 2.0 – Changing Fonts & Font Colors

If you haven’t yet been able to figure out how to change the fonts and font colors in your Thesis 2.0 skin Editor, this helpful video will show you where to look.

Thesis 2.0’s Skin Editor keeps all of the font settings and colors for your site in tidy little packages of CSS styles which can be easily edited.

Let’s quickly cover how to change the fonts and font colors of your site using the Thesis 2.0 Skin Editor.

Open the Thesis 2.0 Skin Editor

1. So first, you need to go to:

Thesis > Skin Editor

2. Then click on the CSS tab.

Under CSS is where you will find all of your appearance settings for the font styles, margins, and any other CSS stylesheet information for your Thesis site.

Changing Fonts & Colors in the Document Body

So let’s do an example:

If you wanted to change the fonts over the WHOLE Body,

First you would click on the “&body” package in the CSS screen.

Now, if you click on the “Options” tab  you’ll see all of the font settings located here. Just click on the arrow under “Font Settings” to open the font settings.

Thesis 2.0 Font Color Settings

Select a different font from the font dropdown box

By default, the Text color box is using the $c1 variable in the classic skin.

You can either just change the color in the box to a specific color using the web hex color codes… OR…

To make fonts change over ALL of the CSS packages, you can also go change the font color in the $c1 variable.

If you want to only change the fonts and colors in one or two sections, you just need to find the package that element is in, and you’ll have font and colors choices in the options for those packages also, same as for the body package.

So for instance, let’s look at the post styles package. You have settings for the headlines, sub headlines, lists, and overall fonts.

Don’t forget to check the “Additional CSS” settings tab for the package too.

Once you have made all the changes you want to make, click on the “Save CSS” button to recompiled your stylesheets. The changes will now show up on your website.

I hope this tutorial has been helpful to you! If you liked it, or have questions, please leave me a comment below this post :)


Comments on this entry are closed.

  • Beth December 29, 2012, 6:13 pm

    New to Wordpress, new to Thesis 2.0…. thanks for helping with these videos.

    • Lisa Allen December 29, 2012, 10:19 pm

      Hey thanks for stopping by Beth, and glad you are finding the videos helpful :)

  • Jeff Cox February 14, 2013, 4:56 am

    Thank you so much for posting this information. I wish I had’ve come to this site three hours ago, it would have saved me a lot of frustration. Excellent information, and well put together video. Thankyou!