Posted on 03.15.11

Nine Quick Steps to Integrating Typekit with Drupal Gardens

by Joy Burke

Drupal Gardens and Typekit are a one-two punch for great web typography that's easy to implement. Here are nine quick steps to integration nirvana.

Are you working on a Drupal Gardens site and need Typekit’s great library of fonts? Or maybe you already have a Typekit account and want Drupal Gardens’ rapid deployment content management features. Both these tools offer a wealth of options for web designers to ramp up their projects. Here’s a quick run-through on getting them to play nice together.

Step 1.

Register online at www.tyepkit.com. Choose the plan that will fit your needs. They range from “free” to $100 per year, depending on how many websites and fonts you plan on using. You can also sign up for a 30-day Trial Plan.

Step 2.

Log-in to your Typekit account and create a kit. This tells Typekit what site to add its fonts to. Type in the name of your website and its domain name.

Step 3.

Now it’s time to go find some fonts. Typekit has an enormous library of fonts to choose from. Browse by Style, Foundry, or Tags.

Step 4.

Once you find a font that’s going to work for your site, you click “Add to kit.”

Step 5.

When the Typekit Editor window pops up, click on “Embed Code” at the top to receive the font code. At the bottom where it says, “If you’re using a plugin or service that asks for a Typekit ID, use this: xxxxx.” Write down or store this code somewhere because you’ll need that for a later step in the process.

Step 6.

Log into your Drupal Gardens site and click on the modules tab at the top. Select the Typekit module’s checkbox and click “Save configuration.”

Step 7.

Then click on the “Appearance” tab at the top of the page. This will load the bar at the bottom of the page that provides you with a list of options: Themes, Brand, Layout, Styles, Advanced. Click on the “Styles” tab. Then click on the “configure Typekit fonts” to the right of the “Font” list.

Step 8.

Enter in the Typekit ID that was given to you in the Typekit Editor page under “Embed code.” (Refer to step 5) Then click on “Save configuration.”

Step 9.

Select which type you want to use Typekit fonts on. The Typekit font will be in the list of fonts that pop-up, and will automatically change your selected font. Then you can style accordingly within Drupal Gardens. Feel free to change the properties (color, alignment, etc.) and customize to your heart’s content. It’s that easy!

The Last Word

On a side note, there is sometimes a bit of lag time in loading Typekit fonts, which trips up the creative process and designing on the fly. Every time you want to see a change, it’s a pretty slow process (due to the fact that fonts are hosted online). This requires a bit of patience. It’s definitely a better user experience to design in a vector- or pixel-based program like Illustrator and/or Photoshop because you don’t have the creation lag-time. You’re able to rapidly make design decisions. However, what you lose in design-on-the-fly time you more than make up for in not having to go through the web graphic slice and dice export process over and over again. Plus, the fonts are treated by search engines as text, which is great when it comes to SEO and keyword strategy.

These are two great tools that offer web designers more freedom when customizing sites. Plus, one of Typekit’s biggest partners is Adobe, which means more and more fonts are being added to Typekit everyday, making the possibilities nearly endless!

Got any other ideas for working with Typekit or Drupal Gardens? We have been working with Typekit for a while, but are just getting started with Drupal Gardens. Any feedback is definitely welcome.