Typekit-Font-your-face

//If you want to use an external font-hosting solution, I've got Typekit working. So, follow the steps below. You are on your own if you want to user any service other than this, but as long as you can get an embed code, the same principles should work with different services. Unfortunately we've got some funky server issues that are preventing various type APIs from working with our Drupal installs (and providing us a swanky administrative interface for font management!), so we have to take a more roundabout approach to enable font hosting. This tutorial should take 10-15 minutes (not including picking fonts in Typekit, which might take you a while...).//

1. Sign up for Typekit and their freebie account 2. Create a new kit for your site. You'll need to enter the domain, and then 'add' some fonts to the kit and hit 'publish' – see the Typekit documentation for the latter (but it should be pretty clear).



3. Edit your kit and once the fonts you want are activated, click on 'embed code' in the top right corner. 4. Cut and paste that embed code – it will look something like this:  try{Typekit.load;}catch(e){} 5. Access your site resources via FTP and navigate to modules/system (not sites/all/modules!) and make a copy of html.tpl.php (this is a PHP template served through the 960 theme) 6. Place your copy of html.tpl.php in sites/all/themes/ninesixty – and edit the file:



7. Copy your embed code into html.tpl.php after the line that reads:  and before: 8. Save the file. 9. Within drupal, navigate to Configuration >> Performance and click on 'Clear all caches' (this will rebuild the theme registry and make the theme switch over to the new version of html.tpl.php that we've set up.

Your typefaces should now be available in the 960 theme. To test them out go to styles.css and make an edit, the easiest way to test it is apply your typeface to the body (Everything!) of your theme. Just add a CSS declaration like:

body { font-family: "facitweb",sans-serif; }

...and test your site to see if the type changes.




 * you'll need to get the CSS ID for whatever typefaces you've activated you can do this by clicking on 'Using fonts in CSS' in the upper left of the first screen capture on this page (you'll get a popup like the above that lets you know how you should refer to a typeface within your CSS).