One of the most frustrating aspects of working on a Website is the issue of fonts. There are two major stumbling blocks when it comes to fonts on the Web. The first is the technical end of using the fonts. For a long time, this was a big problem, but it has been resolved now that CSS has the ability to reference a font for downloading.
The much bigger issue is that of licensing. Font foundries tend to have very restrictive licensing terms, as a holdover from the print days. For example, a few years ago I purchased a font for use on a Website, but the license is only for print and rendered images, and it is a single-seat license. What this means for me is that even though the font is gorgeous and very readable on the screen, I cannot use it on my Website except as a font within an image. Despite having the technical capability of putting the font on my site with CSS, I would be in violation of the licensing. When I asked the foundry what I needed to do to license the font for Web use, I was told they were currently figuring it out. It is no surprise (and little secret) that font usage outside of the licensing terms is rampant on the Web. It is too easy to do, and the foundries make it too difficult and expensive to do it right.
The good news is there is a solution. A year or so ago, I came across a site called Typekit, which is currently run by Adobe. Typekit lets me license fonts for use on the Web and easily put them on my site, and it also allows the font foundries to get paid. The browser support is wide enough that I feel comfortable using it, which is always a concern on the Web. Some third-party foundries also allow you to install their fonts to Typekit so that you can use it as a single access mechanism.
Typekit is very affordable, and comes in a number of plans. There is a simple, free plan, and a very low cost Personal plan. The free plan is highly restricted (just over 200 fonts, and you need to display the Typekit badge on your site); the Personal plan is a little less restrictive. I signed up for the Portfolio account, which gives me full access to the font library, allows me to use the fonts on unlimited Websites, and use as many fonts as I want, all for $49.99/year. The lower plans have limitations regarding the number of sites the fonts can be used on, and the number of fonts that can be used.
Once you sign up for your account, you are asked to name your first "kit" and provide the URLs that it can be accessed from. (A "kit" represents a site.) After you do that, you are given two HTML tags to paste into the <head> tag of your site. Copy the code down, and you are ready to browse the library. The library is easy to use, and it lets you filter by things like font weight and if it is recommended for headings or blocks of text.When you find a font that you want to use on your site, you add it to your "kit." This brings up a dialog (Figure A) that lets you choose which sub-fonts (like bold, italic, etc.) that you want available, and it will show you the size of the download that it will require. Obviously, for rapid download speeds, you should work to minimize the fonts you are using. In the dialog, you can also add CSS selectors that will use the font. Figure A
Configuring the font for use (Click the image to enlarge.)
In addition to the CSS selectors, Typekit will make the font face directly available to your CSS. Click the Using Fonts In CSS link on the dialog to see how to use them.
It only took me a few minutes to go from looking into Typekit to having the fonts work on my site. I have always been concerned with the proper, legal usage of various copyrighted materials, and the licensing terms for fonts are especially confusing. Thanks to Typekit, I have a source of legally licensed fonts that are a snap to use, and it does not require me to upload or maintain any files. I could not be happier.
J.JaKeep your engineering skills up to date by signing up for TechRepublic's free Software Engineer newsletter, delivered each Tuesday.
Justin James is an OutSystems MVP, architect, and developer with expertise in SaaS applications and enterprise applications.