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?
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.
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.