Entries tagged ‘Webfonts’
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.
HelloFresh is a delivery service that saves you time on shopping and meal planning – you pick recipes and they send a box full of pre-measured ingredients that you cook at home. It’s one of many such services popping up left and right. In this growing market, where websites replace store aisles, each brand’s take on photography, colors, and type will be key to luring in cooks.
The approach of HelloFresh is a bright orange and green color palette combined with Alice Savoie’s Capucine. Her typeface is used primarily for headings and its rich flavor is balanced by a generous amount of white space. Capucine’s distinct italics are also put to good use, adding a layer of hierarchy and a subtle sense of movement to the page.
The design carries over to their iOS app, where you can see recipes and rate meals. Paired with Adobe’s Source Sans, Capucine is used more extensively and at a wider range of sizes. The typefaces complement each other, creating a bright vibe and easy-to-follow instructions. Overall, the use of Capucine lends warmth to an experience that could easily feel cold.
What began as a retooling of our production process ended up as a full-scale rebuild of every font in our library. The new, updated fonts are now available to all customers as free upgrades. The changes are almost entirely technical in nature – in other words, the design of the typefaces remains the same – but the improvements are beneficial to everyone, particularly those who licensed webfonts or who regularly use Microsoft Office applications on Windows. Many of the changes were based on customer feedback so if you ever experience problems with our fonts, get in touch – we’re here to help.
So, what changed?
Desktop Font Changes
- OpenType fonts now work better in Microsoft Office programs. If you’ve seen styles behave unusually or not show up at all, this should fix that.
- Certain fonts are now style-linked for better behavior in programs that require style changes be made using the Bold or Italic buttons. Dive deep into style linking.
- Font menu organization has changed for three families: Bryant Condensed, Bryant Compressed and Klavika Condensed. The fonts are now grouped as their own family rather than under their larger family name (see illustration below). Some programs were unable to handle the larger number of fonts in a single grouping. This also results in better cross-platform compatibility.
- Other minor improvements.
- WOFF 2.0 format added. Webfont packages now include WOFF2, WOFF, and EOT files for each style. This new format offers compression advantages over the original WOFF format.
- OpenType code, once stripped for file size, has been added back into the fonts. This does not add OpenType features, but restores the ability to access them via CSS for any OpenType features in the font. For most of the current webfont library that translates to ligatures and fractions.
- Fixed glitches that occurred in certain browsers hindering rendering or kerning.
- Further minor improvements to rendering of all non-manually hinted fonts.
How to Upgrade
First, sign into your account and re-download your licensed fonts. Desktop users should uninstall existing fonts, restart, and then install the new fonts — in that order. Because the internal names of the fonts changed for the three reorganized families — Bryant Condensed or Compressed, and Klavika Condensed – existing documents using those fonts will have to replace the old fonts with the new fonts inside the document. Webfont users, upload the new versions to your server and check that the new font file names match the old. And for those of you using Typekit, republish your kits and the latest versions will be served.
The Nerf Ball. Masking tape. The Hüsker Dü logo. Cheerios and Wheaties. This is Minnesota design and we haven’t even mentioned the architecture. Or the chairs. Or the rollerblades (don’t roll your eyes). Or the magnetic poetry (don’t roll your eyes!).
Walker Art Center launched a web-based initiative called Minnesota by Design and as you can see, we can’t pick a favorite. That’s why it’s such an honor to have Klavika included in the collection. Eric, who designed Klavika in 2004, was born in Minnesota and we’re proud to uphold the culture that has been here long before us.
The virtual gallery allows the Walker to include works that can’t be practically collected – like a park. It also means webfonts. We were excited to see Maple chosen as the typeface for the project, used for everything from navigation to descriptions and even the map that represents the origins of the designs.
So if you’re interested in some design history – much of this work extends far beyond Minnesota – take a look yourself but beware the rabbit hole. Soon you’ll know plenty about the Honeycrisp apple. Tonka Toys. Paul Bunyan. Marcel Breuer…
We’re excited to announce the release of two new typefaces, Scandia and Scandia Line. Although they’re siblings deep down, their differences are more apparent than their similarities. Designed first, Scandia Line is a skeletal sans serif made entirely without curves. Scandia came next, taking Line’s circular proportions but abandoning the all-angle policy for generous curves instead.
Each family has four weights with Scandia offering corresponding italics. As if that weren’t enough, Scandia and Scandia Line also include a stencil variant and several alternates for added versatility. The family’s matching proportions make them a perfect typographic pair but their distinct personalities allow them to function nicely on their own.
Available now, you can license Scandia and Scandia Line in web and desktop formats. For more about each family, visit their respective pages or take a look at their PDF specimens.
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.