Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Brandon Brigham
Brandon Brigham
3,716 Points

How to add custom fonts to your WordPress site using Typekit

My client has an Adobe TypeKit account and wants to incorporate 3 fonts from their site onto WordPress... I found a WordPress plugin that incorporates TypeKit fonts into your site but it doesn't seem to work....

If he has the actual text files how would I go about putting them into the WordPress site I'm building?

Thanks

3 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Check out our Bootstrap and Theme Development courses for how to link to additional CSS/JS files. That should be all you need I think.

Matt Monaco
Matt Monaco
2,563 Points

Typekit gives you all the tools necessary to use their fonts on your website when browsing their catalog of fonts. An easy way is using their font kit creator which will provide you an embed code you copy into the head of your wordpress theme and use the fonts as you would any other.

detailed instructions here: http://help.typekit.com/customer/portal/articles/786466-using-typekit-with-a-self-hosted-wordpress-site

Joshua Briley
PLUS
Joshua Briley
Courses Plus Student 24,645 Points

Based on the Wordpress tutorials by Zac, I believe .js and .css files are supposed to be added in the functions.php file. Zac Gordon, please correct me if I'm wrong, but I went the functions.php route, as opposed to the method recommended by Typekit (which seems to suggest simply adding those to your header.php file.

function theme_typekit() {
      wp_enqueue_script( 'theme_typekit', '//use.typekit.net/YOUR_KIT_ID.js', '', false);
  }
  add_action( 'wp_enqueue_scripts', 'theme_typekit' );

  function theme_typekit_inline() {
    if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
      <script>try{Typekit.load();}catch(e){}</script>
    <?php }
  }
  add_action( 'wp_head', 'theme_typekit_inline' );