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

[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 {
    font-family: “futura-pt”, sans-serif;
    font-weight: 400;
    font-size: 18px;
    }
    h1, h2, h3, h4, h5, h6 {
    font-family: “futura-pt”, sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }[/code]
  • Hit 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.
    (Visited 1 times, 1 visits today)