Skip to main content

The Cheeky Monkey Media Blog

A few words from the apes, monkeys, and various primates that make up the Cheeky Monkey Super Squad.

How to add typekit fonts to your drupal website

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 lightwight approach to add Typekit fonts to your drupal website:

Choose Your FontsProxima Nova

The first step, is to login or create an account at typekit.com

You will want to setup 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.

Typekit jsNext, 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 sites 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;
}

Typekit EditorIf your having 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 on 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, 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 id’s. 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.

Web Development

Would you like to know more about what we do?

View Our Services

Graphic Design Cheeky Monkey

Have a look at some our client work

View Our Work

Cheeky Monkey Discovery

Learn more about Cheeky Monkey Media

About Us

Comments