*** From the Archives ***

This article is from February 8, 2010, and is no longer current.

Expand Your Web Design Font Choices, Part 1

10. Put your Web pages on a Web server. You can’t see the Web fonts in action until the Web page is on a Web server. The JavaScript you insert in your Web pages contacts the Typekit servers, but Typekit servers send the font only if the page is viewed from one of the domains you defined when you set up your kit (see step 2).
To preview the fonts on your own computer before moving your Web pages to your live Web server, set up a testing server: basically, a complete Web server running on your own computer. You can then add the domain localhost to your kit. Then when you view your pages in a Web browser using the local address https://localhost/ you’ll be able to see the Typekit fonts. For instructions on setting up a testing server on your computer, go to www.sawmac.com/xampp (Windows how-to) or www.sawmac.com/mamp (Mac how-to).
To add a domain to your kit, login to Typekit.com, click the Launch Kit Editor button, and click the Kit Settings link in the top right of the Kit Editor (Figure 9). You can add more domains, separated by commas. So if your kit has the domain mysite.com, you can add localhost to it like this: mysite.com,localhost.
Figure 9: You can change the name of your kit and add or remove valid domains from the Kit Settings window. While you’re here, I recommend that you uncheck the “Include Google Analytics” checkbox. While this feature helps Typekit learn how their fonts are used, it also slows down your site and lets Typekit collect information about the visitors to your site. Click on the image to see a larger version.

Picking a Service
In my tests, both Typekit and Kernest did a good job at quickly dishing up Web fonts. Which of those you choose depends on which fonts you like. Typekit offers a much smaller range of fonts, but they’re top-quality, legitimate typefaces. In addition, since Typekit is a commercial venture, they’re able to invest money in updating their infrastructure and making sure their service works well. They offer a 100% uptime guarantee, while Kernest doesn’t.
The downside of hosting services is that if they go out of business or shut down, you may no longer have your fonts! Your Web site’s typography could change completely. That’s one advantage Kernest has over Typekit — it does give you the option of downloadable fonts. You can set up your account, download the fonts, and still use the hosting service, which will save you bandwidth costs since the fonts will be downloaded from the Kernest servers. If Kernest shuts down, you could then switch to hosting the fonts yourself. It’s a good backup plan.
In the next article, I’ll look at hosting fonts yourself and also examine some downsides of Web fonts in general.
 


Previous 1 2

James Fritz is a Principal Program Manager: Content Tools and Workflows at LinkedIn.
  • richtpt says:

    Not to be rude, but what good is the print button when the article is two pages and the print button only prints the first page? It should either load the entire article into one page so you can print it or just go ahead and print the entire article. I don’t print to printers, I print to PDF’s. Just saying the option to print the entire article would be nice. Thanks! :)

  • Terri Stone says:

    Thanks for your feedback on the Print button’s functionality. I agree and will add this to our list of upcoming fixes.

    Terri Stone
    Editor in Chief, CreativePro.com

  • JPadilla says:

    I just got ThemeDreamer, for Dreamweaver/Worpress, and was wondering if you’ve tried their font wizard. It seems similar, uses OFL fonts (the install gives you about 50 of them) and makes the serving of the fonts sound easy.

    I haven’t actually used it, I’m still trying to get a grip on programming PHP.

  • Anonymous says:

    If you like TypeKit, then why aren’t you actually using the fonts on this page? Answer is that the fonts don’t look very good, I think.

  • Anonymous says:

    this is a good primer on using typekit – far, far better than the scattered and hard to find over-designed and over-javascripty guff on typekit’s own site

  • >