Written by on

How to Use Typekit Fonts in Builder

Typekit’s web fonts are super-easy to use with iThemes Builder. Here’s how:

1. Create an account at Typekit.com. Create a kit by specifying the domain on which you wish to use the font(s).

2. Copy the embed code provided by Typekit:

3. Go to WordPress dashboard: My Theme -> Settings -> Analytics and JavaScript Code and paste it in the List any JavaScript or other code to be manually inserted inside the site’s <head> tag in the input below  text area:


Save Settings.

4. Again from Typekit.com, add the font that you wish to use to this kit. Click Using fonts in CSS:

5. Copy the font-family line:


Now we can use the font in our child theme’s style.css file just like any other.

Example:

Awesome results:

6. To make this font available in Builder’s Style Manager, the following code should be added in child theme’s functions.php file (code copy available here):


Note: In the above, ‘museo-slab’ serif should be replaced with font-family value copied in step 3. Single quotes are being used instead of double quotes because ‘museo-slab’, serif will be surrounded by double quotes.

7. Success! Now this Typekit font will be available for use in Builder’s Style Manager:




Which font will you choose? Now you’re all set to start customizing your site with Typekit fonts from Builder’s easy-to-use Style Manager. For more great Builder tutorials like this, visit the iThemes Codex and iThemesBuilder.com.

Comments

  1. Great tutorial – I love the fact that you can use the typeface in style managers list!

    I currently use google fonts is there a similar way to do the same – the chosen google font showing in the style manager list?

    Thanks :-)

  2. I keep looking for a good tutorial for google fonts and builder themes. I have tried several and none seem to work, and I must be missing something. Please pass tutorials along if you come across any!

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35