Using TypeKit WebFonts in Drupal 7

TypeKit is a great way to get webfonts into your Drupal site, there is a free account option which limits your domain to 2 fonts and displays a typekit logo at the footer of your pages. Get over to Typekit, and get your fonts, then grab the embed code.  

typekit-drupal-embed-webfonts

 

This link has to be inserted into the head section of the Drupal site, you need to copy the html.tpl.php template from the system folder dircetory into your theme folder, copy:

/public_html/modules/system/html.tpl.php

to 

/public_html/sites/all/themes/yourtheme/html.tpl.php

Insert the embed code just after the title tag and before the closing </head>

javascript-typekit-code-head

To use the fonts in your site, you can just declare the font family name in CSS or use the class supplied in the TypeKit or supply your own selectors.

typekit-selectors-css

And if you don't want that Typekit logo on the page - junk it:

 

img.typekit-badge{

display: none ! important;

}
Check out also using Google Fonts and Cufon
 
An even easier way to do all this is with a module for Drupal that can integrate with most of the web font services, check it out. This way you are not altering core Drupal files.

Tags: