Adobe Typekit Integration

Creating an account

First, you will need to create an account on Typekit.com. You can choose from any of their plans, including the Free Plan; all paid plans are free for the first thirty days, so you can try Typekit out risk-free.

Choose some fonts

Once you’ve created your account, choose some fonts! When you find a font you want to use, click “Use Fonts” on the font card or on the font detail page. Select the Web tab in the window that opens, and then “create a new kit”. Please refer to this article to learn more about this process.

Setting your site for Typekit

• Go to the Themes Options menu items within Appearance. Then click on Google Web Fonts tab.
• Turn Off the State option. Save Changes.
• Go to the Custom Code tab within the Theme Options.
• Within the Header JavaScript Code, paste your Typekit embed code.
• In the same section, use the Custom CSS* box to customize your font stack CSS. Refer to the following code example:

  html, body, p, form, .nav li a {
      font-family: "ff-nuvo-web-pro", serif;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
  }
  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .pace .pace-progress {
      font-family: "museo-slab", serif;
      font-weight: bold;
      -webkit-font-smoothing: antialiased;
  }
  

• Click on Save Changes.