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.
FÖDA, an Austin-based design studio, has renamed and rebranded their neighbor, Hewn, a wood shop, fabricator, and mill. The hefty Colfax Black logo sets the tone – spanning 8′ wide on the hopper above! — and Colfax webfonts extend the identity online. Check out their brand guidelines, patterned business cards, and striking sliding door below.
Photographs by Nick Simonite.
The new year is already humming along but we’d be remiss if we didn’t mention our 2015 pledge to 1% for the Planet. For the past six years, we’ve given one percent of our annual revenue to nonprofits whose work benefits the environment. If you made a purchase from us last year, here’s where one percent of that sale went:
- Bicycle Alliance of Minnesota
- Climate Generation: A Will Steger Legacy
- Cycles for Change
- Friends of the Boundary Waters Wilderness
- GRuB (Garden-Raised Bounty)
- The Humane Society of the United States
- Midtown Greenway Coalition
- Physicians Committee for Responsible Medicine
We joined 1% for the Planet in 2010 and have fulfilled our commitment every year. While we’ve been proud members, 2015 marks the end of our membership. We will continue to donate to groups that strive for a healthy environment, but without being bound by 1%’s nonprofit directory. With all of the opportunities out there, we look forward to finding new ways to support good causes.
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.
Update: The Paper Swap is closed. Individual winners will be notified.
We’ve been collecting type-related stuff for years now, everything from books to specimens to rain ponchos. After dutifully saving every scrap, it’s time to send the duplicates off to a new home. So, wanna swap?
Send us a single piece of type-related material you’re willing to part with and we’ll select three favorites from everything we get. Among these winners, we’ll divvy up the material equally with one exception: the first place winner will choose three items they want before anyone else; second place will then choose two; and third will go last and choose one item.
On our end, the swap includes a variety of things, some with a Process connection, some without. Many of them can no longer be purchased or were never widely available to begin with. Here’s a partial list of what we’ll swap (quantities above one are noted):
- Modern Typography: An Essay in Critical History. Robin Kinross. 1992 (1st edition).
- The Great Discontent, Issue One. Edited by Tina Essmaker and Ryan Essmaker.
- Feltron 2007 Annual Report. Nicholas Felton. (Numbered #448 of 2000, signed).
- Metro Letters: A Typeface for the Twin Cities. Edited by Deborah Littlejohn. 2003. (2)
- Letterletter 14: Mannerist Writing. Gerrit Noordzij. 1996. (2)
- 14 Faces: Work from the MA Typeface Design class of 2007 at the University of Reading. Specimen booklet. (2)
- KABK Type and Media, class of 2007–08 poster. Type specimen.
- Interrobang 3. Edited by Stephen Coles and Tamye Riggs. 2005. (Featuring articles by Jorge de Buen and Jan Conradi, with display type set in Maple). (2)
- Font 004. Edited by Stephen Coles and Tamye Riggs. 2005. (A FontShop publication featuring an interview with Underware). (2)
- Mark Simonson Studio 3D postcard set (with 3D glasses).
- Task Newletter #1. Edited by Emmet Byrne, Alex DeArmond, and Jon Sueda. 2007.
- The Letterfirm Reader. Ian Lynam. 2013.
- FontShop rain poncho (with FF Tundra notebook).
- Monotype ampersand coasters (black).
- SOTA 2013 Typography Award collectible. Letterpress printed card honoring Zuzana Licko.
- and more…
How to Enter
Your entry should include: One piece of type-related material, well-packed so it doesn’t get damaged in the mail. On a separate sheet of paper, include your name and email address so we can contact you if you win. Optional: tell us why your piece of material is special.
Send entries to:
Process Type Foundry
PO Box 270086
Golden Valley, MN 55427
The not so fine print: Entries must be received by October 9, 2015. Any items sent to us will not be returned – and may be included in a future swap. A legible email address is required, so don’t forget! After selecting and notifying winners, they must claim their swap within fourteen days otherwise their prize will be given to the next in line.
* If this one goes well!
Today’s Sentinel & Enterprise features a bright rendition of the letter W by our own Nicole Dotin. For The Alphabet project, artist Anna Schuleit Haber has been taking over the front page of Fitchburg, Masachusetts’ daily newspaper, in collaboration with designers from around the world. You can see all of the front pages on the Fitchburg Art Museum’s website, as well on Twitter, in the hands of Fitchburg residents.
After a month on Fontstand we’ve made all of our typefaces available. If you haven’t seen Fontstand, it’s a free Mac application that allows you try fonts at no cost and rent them on a monthly basis. We offered five select families when the app debuted but now our entire library is there to test and rent. Read a bit more about the app in this blog post.
If you want to dive in, visit our foundry page on Fontstand.