How to add typekit fonts to your drupal website

So you just got the latest design from your graphics department. Now it’s up to you, the drupal developer, to take that design and turn it into reality. The problem is that they used some fancy-pants new font and you need to make sure it works on every browser and mobile device.

There are a few solid options to choose from, including Google fonts and the popular @font-your-face drupal module. However, one of the services that I have been using lately is Adobe Typekit. They offer thousands of fonts and make it easy to scale. Typekit offers a basic free account as well as paid versions.

Here is a lightweight approach to adding Typekit fonts to your drupal website:

Choose Your Fonts

The first step is to log in or create an account at typekit.com

You will want to set up a new kit. Kits are groups of fonts that will be packaged together and distributed over a CDN. Once you’ve saved your kit, it will give you a small Javascript snippet. Copy this down for later, that is what makes everything work.

Next, search through the Typekit library and find your fonts. You will want to choose a font that offers a Webfont option. Add this font to your kit, and repeat as necessary.

Now go through your kit and make sure you only add the fonts, weights, and styles that you will actually be using on your website. Your first instinct might be to select all of them, but if it’s not being used, it’s just dead weight- we want to keep filesize low.

Click publish, and your fonts should be available.

Add Your Code to Drupal

Now we need to tell drupal about these new fonts. To do this, we add the Javascript we copied down earlier into our site’s theme. This next step may depend on the version of drupal you are using or how your theme is built. One method is to simply hard code the Javascript directly into a page.tpl.php or html.tpl.php. Another option of course is to use a preprocess function similar to this:

/**
* Implements template_preprocess_html().
*/

function MYTHEME_preprocess_html(&$variables) {
 //Adds typekit js to theme
 drupal_add_js('//use.typekit.net/wje3ojf.js', 'external');
 drupal_add_js('try{Typekit.load();}catch(e){}', 'inline', 'page_bottom');
}

What you need to end up with is having the javascript snippet from Typekit inside of the tag of your document so it looks something like this:

Add fonts to your Theme

If you haven’t already done so, you will need to add the new font family into your CSS, less, or sass file.

You can add the fonts like normal. Here’s a basic example:

h1 {
  font-family: "proxima-nova",sans-serif;
}

If you’re having problems targeting the font name, open up your Typekit editor and click on the “Using fonts in CSS link. This will open up a dialog showing some examples of how to do this.

Another option is to create selectors in your Typekit. This will let you overwrite any existing CSS without having to write additional code.

Open up your Typekit, in the left column, and use the “Selectors” section to apply your fonts to any HTML tag, class, or id.

For example, if you add #page-title or h1, it will apply your font styles automatically to those tags and IDs. Once you’ve added your font selectors, don’t forget to republish your kit.

Although the @font-your-face drupal module now has support for Typekit, this method is fairly straightforward, lightweight, and avoids having to add and maintain another module. Happy theming.