Typekit is a web service that provides fonts for web sites.
To use, register on the site and create a “kit”. See Adding fonts to your site.
You get some Javascript that will load the fonts (where xxxxxxx will be a code unique to your account):
<script type="text/javascript" src="//use.typekit.net/xxxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
With the JS in place, you can use the fonts in any CSS font-family declarations like normal.
Fallback font sizing
One potential problem is using font from Typekit that are much different in size to the fallback fonts that will be used if Typekit doesn’t load for whatever reason.
Typekit has a way around this. You simply style the page assuming that Typekit is not available, then make sure your Typekit-specific CSS hinges on some classes that are added by Typekit to the html tag:
html body {
font-size: 75%;
}
html.wf-active body {
font-size: 100%; /* styles to use when web fonts are active */
}
In this example the font-size will be 75% unless Typekit is used, in which case it’ll be 100%. There are also classes for loading and inactive statuses.
