Oliver Davies

Freelance Drupal Developer

Easily Embed TypeKit Fonts into your Drupal Website

14/02/2011 -- Oliver Davies

To begin with, you will need a TypeKit account. You can register for one here - there is a free version if you just want to try it out.

Next, you'll need to create a kit that contains the fonts that you want to use on your website. I've used FF Tisa Web Pro.

Image: Screenshot of the TypeKit editor

Under 'Kit Settings', ensure that your website domain (e.g. mysite.com) is listed under 'Domains'.

Download and install the @font-your-face module onto your Drupal site, and to go admin/settings/fontyourface to configure it. Enter your TypeKit API key, and click 'Import Typekit' to import your kits and fonts.

Image: Screenshot of @font-your-face settings

Go to admin/build/themes/fontyourface, and click 'Browse fonts to enable'. Click on the name of the font that you want to enable, check 'Enabled', and click 'Edit font' to save your changes.

Edit font settings

With the font enabled, you can now use it in your CSS.

Add new comment