A Lean, Clean Recipe for Typekit Fonts in Your Drupal 7 Theme

Aaron Manire // August 2014

So you’ve decided to level up your Drupal site’s typography and you’ve purchased some beautiful web fonts from Adobe’s Typekit service. You’ve discovered the Typekit module, read the project page notes and found that it’s been deprecated. So next, you follow the project page’s advice to use the @font-your-face module. Two hours later, you find yourself perusing Google Fonts, Font Squirrel and an elaborate user interface when you experience that heavy feeling of Drupal soup bloat. You were sitting down for light, healthy lunch, not a five course meal of typographic bouillabaisse. @font-your-face is awesome for exploring and managing multiple services in the UI, but maybe not so great when it comes to simplicity and deployment. Your style rules are clean, componentized, source code-controlled morsels of elegant maki. Surely, there is a simpler way to embed Typekit fonts?

Indeed, it is quite simply a matter of rolling up your own script. But don’t worry, you don’t need to outfit your kitchen sink with JavaScript debuggers, Typekit provides everything you need. All you really have to do is put it in the right place, with a little wrapper and point to it from your theme’s .info file.

After creating a kit and adding your delectable fonts, pop-up the Adobe Typekit Editor window. By the way, try to keep your font usage to a minimum, every additional font, weight or style increases your page filesize. So like fine seasonings, use them judiciously.

Make sure your domains are correct for your production and development and/or staging environments.

You are ready to Publish that spicy meatball!

Now here comes the (not so) secret sauce, before closing the Typekit Editor window, click Embed code and then Show advanced.

Copy the code from the box and paste it into your favorite text editor. Carefully, slice out the opening and closing <script> tags and discard them into your compost pail. To keep the food inspectors out of our hair, we’ll add a dose of dockblock (a code preservative) to the top and save it as typekit.js in our theme directory. Your code should look something like this.

 

Clear your Drupal caches and you are ready to start cooking with your new fonts. If you’re using Sass, I’m particularly fond of how the Zen 5 theme specifies its font stacks with a variable in the init partial:

// Let’s create some font stacks.

$refrigerator: “refrigerator-deluxe”, Helvetica, Arial, sans-serif;

Now, all I have to do is specify the Sass variable in my style rules, wherever they’re used.

h1 {

  font-family: $refrigerator;

}

Troubleshooting

If your fonts aren’t appearing, first verify that your domains in the kit settings are correct and that the kit is published. You shouldn’t have to wait for more than a few minutes for this to take effect.

If they’re still not working, try enabling the console in your web browser, reloading the page and observing any error messages. Perhaps your kitId isn’t correct and your theme is unable to grab the fonts from Adobe’s servers.

Bon apetite!

Aaron Manire Headshot

Aaron Manire

Director of Web Development

I coordinate Drupal development teams and plan technological growth, and like to get my hands dirty with code when I can. I enjoy that at Isovera I’m constantly learning new things, sharing that knowledge with others, and working with the terrific people who make our work possible.

Filed under: