Process

Getting webfonts up and running on a website can be challenging or just plain tedious. To take some of the sting out of it, we’ve written a quick start guide to help you implement the webfonts right away.

Take it Step-by-Step
The new guide, included in all our webfont packages, has step-by step instructions as well as a pre-written stylesheet for self-hosting webfonts. Just upload the included webfonts folder to your server, add a link to the stylesheet, style some text and you’re done. If it doesn’t go as smoothly as advertised, there’s a troubleshooting section too.

Jump Straight to the Code
You can also skip the steps and jump straight to pre-written CSS @font-face rules and classes. For packages with multiple weights or styles, the relationships between the fonts have already been worked out and are specific to the fonts in your order. The font-family name is shared, the font-weights use number values, and the font-styles are set to normal or italic, making it easier to manage related webfonts.

Need to deal with FOUT, want to make sure kerning is on, or prefer to serve fewer formats? Go for it! The quick start guide offers a solid beginning but isn’t prescriptive – feel free to adjust it based on the priorities of your site. Now go and enjoy the ten or twenty minutes you’ve been spared by not having to write @font-face code!

—
If you’ve purchased webfonts from us in the past, re-download an order from your account to get the quick start guide.

More good news on the rendering front. As we promised last May when we improved Colfax Web, Klavika Web, and Klavika Condensed Web, we had other webfonts to refine. And in September we updated several other families with new, manually-hinted versions.

Elena, each Bryant family, and Stratum 1 & 2 have all been significantly improved for screen rendering. These new fonts eliminate many of the irregularities that stem from a browser and operating system’s translation of a font’s design to screen. Now, the design of these typefaces is upheld more consistently when viewed in a browser and readability — a paramount concern — is enhanced.

Elena Web, Before & After

The auto-hinted (top) and manually-hinted (bottom) versions of Elena Web rendered at 24, 20, and 16 pixels by IE 11 in Windows 8.1. A few noticeable improvements: at 24px, the contrast of the ‘a’ is fixed; at 20px, the ‘g’ is truer to the original design; and at 16px, the loopy ‘e’ is straightened.

If you licensed or downloaded any of these webfonts after September, you don’t have to do anything — you’re using the new fonts. Otherwise, log in to your Account and re-download the fonts. Those of you using Typekit, republish your kits that contain these webfonts and the latest versions will be served.

Over the years, we’ve been refining our webfonts for better performance but today we’re happy to announce significant improvements to select fonts. Colfax Web, Klavika Web and Klavika Condensed Web are now manually hinted — for ClearType and greyscale — providing a high degree of readability across browsers. In addition to manual hinting, some character shapes were adjusted to render nicely down to 14 pixels.

So what does this look like? Although auto-hinting can do a decent job, it often fails to describe the nuances of certain character shapes across a range of sizes leaving a typeface perfectly readable at some sizes while leaving others muddy. The examples below show where auto-hinting failed the hardest (on the left) with manual hinting to the rescue (on the right).

Before hinting, on the left; after, right.
From top to bottom: Klavika Web Condensed Regular, Klavika Web Medium and Colfax Web Bold. All samples are set at 14px and rendered by Firefox 28 on Windows 8.

How can I take advantage of the updates?
Download the new fonts. For previous webfont purchasers, start by logging into your account. The font packages have been updated so simply re-download your order. Or, send us a quick request for the new fonts and we’ll email them to you (be sure to include your order number).

Republish your kit on Typekit. If you’re using Typekit, republish any kits containing the updated fonts to use the latest versions.

Up next
The web versions of Colfax, Klavika and Klavika Condensed were the first in line for the updates, but Elena Web, Stratum 1 & 2 Web and Bryant 2 Web are on deck.