Typekit

[Alden Sison]

Hi Bill,

I thought its type to give Typekit a try. And it giving quite a challenge. So I need your help.

I’m using only two fonts: Calluna for the headers, and Brandon Grostesque for the body font. I am able to the body font with the selector at the Typkit website. But that’s about it. Can;t change anything for the rest, i.e., contact, nav menus, headers, etc.

Need your expert guidance.

Alden.

[Bill Robbins]

Hi Alden,

You’re welcome to use Typekit. They have a WordPress plugin that you’ll want to install and activate. That will enable the fonts to be loaded from TypeKit’s servers onto your site.

After that, go to the theme options page and click on the styling tab. Scroll down to the bottom and check the box to disable Google fonts. Right below that is a box for custom CSS. In that box add this:

body { font-family: Istok Web, sans-serif; font-size: 16px; }
h1, h2, h3, h4, h5, h6 { font-family: Kreon, serif; }
#tagline h2, #tagline p { font-family: Raleway, cursive; font-size: 20px; }
header.primary .menu li { font-family: Istok Web, sans-serif; font-size: 18px; }
h3.widget-title, h2.widget-title { font-family: Kreon, serif; font-size: 24px; }

These are the styles for the various text elements from the theme options. You can replace the font-family of each one with the new ones from TypeKit. Here’s what each of those does:

body — main text elements of the site
h1,h2,h3,h4,h5,h6 — headings
#tagline h2, #tagline p — tagline text
header.primary .menu li — navigation menu items
h3.widget-title, h2.widget-title — widget titles

Once you’ve made your changes, save them and that should do it. If you run into trouble, let me know.

Take care,
Bill

[Alden Sison]

Hi Bill,

That was painless and almost too easy!

And that Custom CSS box…it’s a magic box.

Thanks, Bill.

Alden.

[Bill Robbins]

Hey Alden,

I’m glad that helped out. That CSS box saves us all from a multitude of troubles 🙂

Hope the rest of your week is great,
Bill

[Author]

Posts