Easily Embed TypeKit Fonts into your Drupal Website
Posted on 14th February 2011
Warning: This post is over a year old. I don't always update old posts with new information, so some of this information may be out of date.
To begin with, you will need to register for a TypeKit account - 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.
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.
Go to admin/dist/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.
With the font enabled, you can now use it in your CSS.
About the Author
Oliver Davies is a Full Stack Web Developer and System Administrator based in the UK. He is a Senior Developer at Microserve and a part-time freelancer specialising in Drupal, Symfony and Laravel development and Linux systems administration.