Never miss a thing!

Sign up to have the latest news and announcements from my site delivered straight to your inbox.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Comments

  1. Great post Carrie! I run Typekit on and will have to go back and make sure I’ve installed it properly.
    My problem is that I also have Premise installed and it does not carry over the Typekit fonts to my landing pages. Any suggestions?

    • Hey Vince,
      Glad it was helpful. For Premise, try going to Premise > Main Settings and then scroll down to Header Scripts (toward the bottom). You’ll need to insert those Typekit javascripts in that space as well. I learned a similar lesson the hard way when installing Google Analytics on Premise. πŸ™‚ Let me know how it goes!
      Carrie

  2. Good advice Carrie. i have fallen in love with Genesis over the past few months and with minimalist themes with impact. Brian Gardiner’s advice coupled with your posts have been very helpful.

    • Here’s what I use to include Typekit using functions.php. Just replace the xxxxxxx with your unique ‘code’ found in the file path in the Typekit tool.

      function theme_typekit() {
      wp_enqueue_script( ‘theme_typekit’, ‘//use.typekit.net/xxxxxxx.js’);
      }
      add_action( ‘wp_enqueue_scripts’, ‘theme_typekit’ );

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

      • thanks Michael — is there any advantage to including this in functions.php rather than the header in the Genesis WordPress admin theme settings panel?

        • The biggest I can think of is that it doesn’t allow clients to tinker with it as easily. Any other considerations I can think of like speed, performance, security, accessibility, etc…seem negligible to me if any benefit at all. Just personal preference; I spend more time in functions.php and can make changes via my IDE there than going to the theme settings page, so it can also be slightly more convenient depending on your workflow.

          • I should have also mentioned I like to keep my code as centralized as possible. If I start putting snippets here and there, like in theme or plugin-provided boxes, I can quickly lose track of what’s where when it needs to be updated. Keeping my code all together assures me I know where it is quickly, and it’s not off in a lonely corner somewhere hiding in the shadows.

  3. Thanks for this helpful article Carrie! How about Dynamik Web Builder? Should TK automatically override all the font selections in the DWB GUI? Or is there some extra things that need to be done? I have TK embedded just the way you’ve shown here, and it seems to be working in in some areas, but not in others.

      • I figure it out. Upon re-reading your article I realized I had missed the part about “A few simple CSS edits…” whereas I had initially thought that simply using the “Selectors” setting in the Typekit editor would be enough. In any case, adding the font stack to Dynamik’s “Universal Font Control” custom CSS fields did the trick. Thanks again for this article!

  4. Thanks for your response! Well I wasn’t actually expecting you to troubleshoot my site πŸ™‚ but here it is: http://carmelpm.wpengine.com. All the Sans Serif fonts should be Myriad Pro. I should also add that I did not add any CSS to my site. I just assigned the html (h2-6,p,a) tags in the type Kit Kit editor but now I’m beginning to wonder if that is not really the correct way to go. I love firebug too but I am far from an advanced user. All I use it for at the moment is figuring out what CSS classes and IDs to target.

  5. Hi Carrie,
    I am trying to use Museo slab font. I’ve added the javascript embed code. I wanted to use this font for post/ article titles. In style sheet what what would be the font family name ? or How to apply this font for only for post titles ?

    • Hey Christopher, if you go to Typekit and look at the “kit” you created for your website, there will be examples of how to refer to the font family in your CSS.

      If you wanted to use that font for all your headers, you could do something like:

      h1,h2,h3,h4,h5,h6 { font-family: fontname; }

      To target your post title specifically, you’ll want to look and see what CSS class is used there. Ever used Firebug (or Chrome Inspector)? It can be your new best friend! Here’s a tut: https://carriedils.com/firebug-demo-troubleshoot-css/

Leave a Reply