While working with a designer on a new website, she requested we use Adobe Typekit to make better use of some nicer fonts on the web. Using great looking fonts has long been a challenge, but Typekit seems to offer a pretty slick solution to give you better control. One quick aside, I noticed that my Ghostery plugin doesn’t really like Typekit fonts and by default blocks typekit scripts. So be aware that users may not see your glorious fonts anyway if you use Typekit and they have Ghostery installed. If you want to know more about Ghostery and Typekit, here is a resource for you.
Using Typekit on Your Webpage
Now, in general, Adobe has made it pretty simple to use Typekit with a website. The basic steps are as follows:
- Add some fonts to your kit. Navigate to your library and find a font you like. Select that font and you will be given an option to “Add to Kit” (there is a button that reads “Web use: Add to Kit”). Once you have added all the fonts and variants to your kit, you are ready for the next step
- Add domain(s) to your kit settings. To do this, navigate back to your kit (using the “<> Kits” dropdown menu in the header) and choose “Kit settings”. From here, you can specify any domains where you will be using this kit (among other options). For development purposes, you can enter “localhost”. In theory this is all you have to do to enable Typekit to work with these domains. I found some obstacles in that, hover. Be sure to save your changes.
- Publish your kit. After everything is correct in your settings, go back to your kit page and click the publish button in the lower right corner. It says it can take a couple of minutes for changes to become active, so be a little patient.
In theory, this is where everything should just work. All you need to do is use your fonts in CSS as they are named (all lowercase, replacing spaces with hyphens). An example of a page is as follows:
Of course, you have to replace font-family with whatever fonts are defined in your kit (and replace the Kit ID), but you should see those two sentences with different fonts. If you don’t, then something isn’t right.
Figuring Out How Typekit Loads Fonts
I saw the fonts load correctly on my public domain, but they wouldn’t show on my development machine (using localhost).
Unfortunately, still no luck. But what I could see now, is that inline CSS was being added to the head of my document. The CSS looked like the below:
Storing the Fonts Locally and Serving them Up
It was at this point that I knew I could work around Typekit’s issues. By navigating to the urls in src attribute of the @font-face selectors, I was presented with a file to download. The file downloaded as just “l” (no extension). I guess the file extension would be .woff since the format listed in the CSS file was “woff2”. After downloading each font file and renaming them to something that represented what the font was (“futura-pt-book.woff” and “futura-pt-light.woff”), I put them in a “fonts” directory in my development folder.
Next, I created a fonts-local.css file that contained the CSS code that was being generated by Typekit (see the code snippet above) and stuffed a reference to that CSS file into the head of my document. I replaced the src: urls in the stylesheet with the path to the woff files in the directory I created above.
Finally, in my site template’s html head section, I removed the script calls to Typekit altogether and just referenced my local files.
This technique isn’t exactly ideal, because any changes I make to the kit won’t be propagated to this page (also, your web server has to be configured to serve woff files). However, it allows you to see your fonts locally during development if Adobe’s recommendations don’t work, and also gives you an option if you’re concerned about the whole Ghostery plugin / Adobe privacy concerns issue.
You might be asking, “Why didn’t you just download the .woff files from Typekit?” and skip all the in between, but the problem is that the .woff files don’t seem to be available for direct download. That’s probably because now I could take these woff files and use them with any site or distribute them (illegally), and I think they’re trying to control that kind of behavior as much as possible.