Posted on Leave a comment

Three Options for Custom Fonts on Your Website

A sample of the League Gothic web font

One of the challenges of designing for the web is that the font you want for your design may not be available on the computers your audience use. Resolving this usually requires either 1) Ditching the design intent and sticking with broadly supported font families; 2) Creating images containing text, in which case you can use whatever font you have; or 3) Using a web font type kit.

Option #1 is unappealing to most designers, although it shouldn’t be dismissed out of hand. There’s a good reason that those fonts are widely used. They’ve stood the test of time. Ever see the documentary Helvetica? Watch it.

Option #2 is not so great, though I’ve seen it done and it can work successfully if kept to a minimum. Images are always heavier than text alone, and much more difficult to update. Search engines can’t read them well, so you need to include ALT text.

Option #3 requires a little more effort, but the results are much more flexible. There are several web font kits available.

TypeKit was one of the original. They are a commercial service with access to a large library of quality, licensed fonts. You can get a free account for a single website, which is what I did recently for U.S. Speed Sport. You can see the page title (“Drag Racing” in this case) uses a special font provided by TypeKit. The drawback with the free account is that you have a limited library of fonts, and you’re required to display the TypeKit badge. It’s not obtrusive and might work for a smaller site, but bigger sites will probably want to pay for the non-badged license.

Google Web Fonts is a free alternative that is based on the TypeKit code. The javascript kits are very similar. The advantage here is that there is no badging requirement, but the library is even more limited than TypeKit’s free level.

My most recent discovery is a site called Font Squirrel. They literally hundreds of web fonts available in prebuilt kits, and you can create your own. I haven’t had a chance to use Font Squirrel yet, but it looks promising.

Are you using web fonts in your designs?

Posted on Leave a comment

Typekit: Real Fonts on Your Website

For years, designers have struggled with integrating interesting, expressive fonts into web pages. Until now, the general rule has been to stick to the commonly available font families — the default stuff installed on every Mac or Windows PC — and use images for anything out of the ordinary. This works ok, but (alt tags aside) search engines will not read your text-as-an-image. Not to mention the fact that it introduces yet another file to download, and increases the total weight of the page. 

A new project from Small Batch Inc. looks to change all that. Typekit promises to give you the ability to embed fonts on any web page with full fidelity and typographic control. 

typekit

Typekit is not yet available, but you can sign-up here to be notified as soon as it is.