Adobe Typekit Integration

[lead]Use Adobe Typekit to embed amazing font stacks to your site.[/lead]

[row bg_color=”#f2f2f2″ padding=”8%”]

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

[list type=”ordered”]

  • 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:[code type=”css”]
    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.
  • [/list]

    [spacer top=”12px” bottom=”12px”][/spacer]

    * 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.


    [spacer top=”24px” bottom=”24px”][/spacer]

    Leave a Reply