Entries tagged ‘@font-face’
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 image above begins to demonstrate the changes, but the best way to see the fonts is with a live preview. The differences are most noticeable in Windows-based browsers since Macs largely ignore special rendering instructions. Check out live specimens of Elena Web, Bryant 2 Web, Bryant Condensed Web, Bryant Compressed Web, and Stratum 1 & 2 Web.
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? Visit the live samples of Colfax Web, Klavika Web and Klavika Condensed Web to get the true experience but the images below will give you a taste. 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).
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.
We’ve made a couple of changes to our webfont license, removing some restrictions, putting others in place and adding a new use. The biggest changes are as follows:
- Licensed by pageviews
Our previous license was priced based on the number of domain names. The new one is based on the average monthly traffic, counted in pageviews, of the website using the fonts. The starting price for the lowest traffic level – 500,000 pageviews – remains the same as our previous single-domain price.
- Expanded domain name coverage
Although the new license is still for use with a single domain, the definition of a domain is more inclusive. So long as the unique identifier of the domain name remains the same, subdomains and top-level domains are now unlimited. For example, the following five domain names are considered a single domain:
example.com, example.dk, shop.example.com, blog.example.com,
In the past, this would have counted as four domain names (five subdomains were included with each domain) and required a separate license for each.
- Adding web-based mobile app usage
We were often asked if our webfont license covered web-based apps and our answer was that it didn’t. In our new license, we explicitly allow webfont use for web-based apps using @font-face to call the fonts. It’s important to note that mobile apps built with embedded or included fonts are not be covered by this or our desktop license and require the purchase of a license extension if such use is desired.
Already purchased a domain-based license from us?
If you already purchased webfonts under the previous domain-based license, don’t worry – this doesn’t change your license. It will remain domain-based and not tied to pageviews.
However, if you were to upgrade a previous purchase (say you bought Bryant 2 Web Bold and wanted to upgrade to Bryant 2 Web Complete Family), all the fonts in that order, including the previous purchase, would fall under the new license.
The desktop version of Bryant, our warm and modern take on the geometric sans serif, features stylistic alternates that have been unavailable in our webfont packages – until now! Due to popular request, we’ve now made this typographic flexibility available, giving you more ways to use Bryant 2, Bryant Compressed, and Bryant Condensed on your site.
While stylistic alternates are becoming easy to access in desktop applications that support OpenType, browser support for these features online is still, for the most part, on the horizon. This means that translating this feature to webfonts requires taking a few more steps. We have broken the stylistic sets into separate font files to allow access to these special features on the web with @font-face or Typekit.
Already have a webfont license for Bryant 2, Bryant Compressed or Bryant Condensed? Just log in and go to “My Account” to view your recent orders and re-download Bryant to receive your free upgraded stylistic sets. If you are using Typekit to display Bryant on your website, you should find the new options in your font library.
We’ve converted five more of our typefaces into webfonts. Now you can license Anchor, Kettler, Locator Display, Maple and the much-requested Stratum 1 & 2 for use with the CSS rule @font-face. For a one-time fee, you can serve the delivered WOFFs and EOTs yourself or host the fonts through Typekit. For a quick overview of our webfont option, read Webfonts with @font-face, finally!.