Using TypeKit Fonts

If you’d like to use TypeKit fonts on your Joyn site, then all you need to do is follow the below:

We’ll assume that you already have your TypeKit account set up, and ready to go. If not, visit TypeKit.com and register an account.

The next thing you’ll want to do, is install the TypeKit Fonts for WordPress plugin. Once you’ve activated the plugin, you want to browse to Settings > TypeKit Fonts. This will then show you the plugin screen, where it steps you through the TypeKit setup process, and shows you the plugin configuration that you need to set:

The first code is unique to your account, so make sure you copy that correctly. For the Custom CSS Rules, you’ll want to copy the below:

/* BODY FONT */
body,p {
font-family: "museo-slab"!important;
}

/* HEADING FONT */
h1, .impact-text,.impact-text-large {
font-family: "museo-slab"!important;
}
h2,.blog-item .quote-excerpt {
font-family: "museo-slab"!important;
}
h3 {
font-family: "museo-slab"!important;
}
h4 {
font-family: "museo-slab"!important;
}
h5 {
font-family: "museo-slab"!important;
}
h6 {
font-family: "museo-slab"!important;
}

/* MENU FONT */
#main-nav, #header nav, #vertical-nav nav, .header-9#header-section #main-nav, #overlay-menu nav, #mobile-menu, #one-page-nav li .hover-caption {
font-family: "museo-slab"!important;
}

You’ll need to change the “font-family” for each instance, and you can choose these independently if you like. You may also set line-height etc here, just be sure to use !important, else the Theme Options > Font Options settings will be used.

JOYN

July 4, 2014

Categories:Knowledgebase

1 Comment

0 Likes