Adobe Typekit Integration

Use Adobe Typekit to embed amazing font stacks to your site.

Creating an account

First, you will need to create an account on 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.
* When entering custom CSS codes, your web server need to create a dynamic.css file within the theme folder. Make sure your files are writable by the web server.