Build Your Own Business Website header image

Set Your Heading Styles with Thesis 2.3 Design Options

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

We are continuing our customization of this Thesis 2.3 website by setting up the heading styles. To do that we are going to come back over to Skin Design and we’re going to open up headlines.

Google Fonts – Pros and Cons

The first thing I want to have is a contrasting font here. I have to confess that I am not a fan of Google fonts because they slow the site down. Although there are a ton of Google fonts here that you can choose to use if you so choose.

Chris: Quick note. There are a few ways to integrate Google fonts. Nearly every single theme or plugin I have ever looked at that does this uses the link method in the file header which is extremely slow and causes a front end loading strain on your website.

Thesis uses what’s called an asynchronous javascript loading method. Thesis has the lightest weight way to load Google fonts. I agree with Rick, I hate that it slows the site down. No matter how you do it, it is going to introduce some delay but the way Thesis does is is the absolute, bar none, best way to do.

I can’t tell you how many people in support who have modified their Thesis site thinking they need to do a Google Fonts Implementation using that link method or using a plugin to do it or whatever it is. Please do not do that because you don’t need to. It’s built into Thesis already. It’s got the ultimate way to load Google fonts.

Support from DIY Themes

If you have any questions about that, you don’t see your font in there or you need some help with it, just shoot us a support request and we’ll take care of it right away. The bottom line is that your site has the ultimate Google fonts integration. If you have any questions about it, just let me know.

Set the Headline Font and Font Size

Rick: Well, we’re going to use Alegra here. I like big headings so we’re going to choose 36 for that font size. For the font color we are going to use 669CA4. Obviously, you can come over here and you can pick font colors off of the color picker. And you can use the color picker to modify or adjust them. You’ve got lots of room to play with here.

Since I have a color scheme, I’m going to stick with it and enter 669CA4. That’s my headline color. And my subheadlines, which are h2s, h3s, I’m going to also use the Alegra sans and choose 24 pixels for those. The color is a different color, it’s 683400.

Understanding Design Options Buttons

Chris: On your Design Options there you’ve got the buttons at the bottom, layout and dimensions, font and size primary, headlines, subheadlines. It’s probably not clear to most people how those buttons work and why they work the way they do.

Anything that has a value is going to appear in button form. Anything that doesn’t appear there but appears in the drop down menu does not yet have a value associate with it beyond whatever is the default.

That way you know what has been set because you get a summary there at the bottom basically in button form. If it’s not down there then it has not been set. It’s just kind of a quick, at a glance “what have I changed” interface.

Rick: And we can come over here to the Nav Menu and do the same thing. We can go back to the Alegra sans for the nav menu. I don’t think we need to change the size of it. It’s already nice and big.

Let’s look at the site. I’ll flush the cache. And here are those changes. So, what you’ve seen here is an example of the kinds of things you can do quickly and easily in Skin settings of a specific skin.

0 Comments… add one
0 comments… add one

Leave a Comment