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 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 { 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; }
- Hit 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.
Recent Comments