If you are excited about the newer web browser software being able to make use of a myriad of fonts then I guess that you are a web designer. However, if you are a font designer then maybe you’ve been tracking news about @font-face since 2007 with trepidation rather than excitement.
Why @font-face is good
Web designers are freed from the limitations of ‘web safe’ fonts. Websites’ designs will become even more diverse. I sincerely hope that designers will embrace both creative and functional typography.
Why @font-face is bad
The major downside of using @font-face is the legal side. It is possible to serve any font from your webserver but you may be breaking the law. The bad thing is that there will be people that do this and the implications could prove costly.
Using a copyrighted font without permission is just as illegal as uploading and serving copyrighted music or images without permission but, alas, I don’t think as many people will care or even be aware of the issue.
The future of @font-face
As more web browsers support @font-face I am certain that we will see widespread (legal and illegal) usage fairly quickly. I imagine that corporate companies will embellish their websites with bespoke fonts. There may even be an increase in people claiming to be typeface designers (which could be added to the ‘bad’ list).
Keeping website designers and type designers happy may be a struggle but there are new services that aim to keep both content by introducing new methods that allow fonts to be used legally. The main contender seems to be Typekit, but Kernest may be worth keeping an eye on.
“I want a YouTube of typefaces. Easily created, open to everyone to easily embed-able.”
Garrick Van Buren creator of kernest.com
Kernest enables legal web fonts
Kernest offers a comprehensive range of fonts that are free to use and it is really easy to find fonts by style, foundry or designer. You can build a list of fonts for comparison and select those which you would like to use on your website.
To use fonts listed on Kernest you must sign up (simple, just email and password). For each font you want to use you must provide the base URL of the website you will be using it on. That done, Kernest generates and hosts a CSS file with the @font-face decarations and you are provided with the CSS file link via your profile page. Then it is simply a case of using font-family in your own CSS to declare the font you chose. All the fonts are also hosted on Kernest.
As you provide the domain where you want to use the font Kernest is able to stop other domains accessing your personallised style sheet (illustrated below). It also prevents unregistered websites from linking to the fonts on Kernest’s servers directly. This system means that paid fonts could be added in the future.
I created a file that included the link to my kernest.com generated stylesheet and style the text accordingly, then uploaded the same file to two different domains. Only blog24.co.uk had been registered with Kernest.
Some lucky people have been given a preview to the Typekit service. Andy Clarke (For A Beautiful Web) is one such being and has written about his first impressions of Typekit, with a number of screenshots. Overall, the service looks very easy to use and looks a lot more refined than Kernest.
I noticed that the Subsets (in the sidebar) has not been enabled during the preview. However, I also noticed earlier today that Jeff Veen’s screenshot does give a clue to what the Subsets are. By selecting a subset of a font, I think it will be possible to shave off a few kilobytes for speedier font downloads.
Overall the I see @font-face as a good thing if used legally. Less limits, more creativity.
Kernest is great, but I can’t wait to try TypeKit.
I first started researching the possibilities of web typography some time ago. More so when I began to consider redesigning this blog a few months ago (at the moment it just seems too cramped).
I’ve been reading a lot about web typography, @font-face and numerous opinions and issues — here’s some of the things I’ve been reading.
Tutorials and Resources
“Linking to the fonts on this site explodes your typeface repertoire. And far from cutting into the profits of type designers, these typefaces enable everyone to get closer to the typography they dream of – perhaps in scripts that they have never before been able to use online.”
- webfonts.info offers information about browser support and where to find fonts.
- Beautiful fonts with @font-face a super tutorial with plenty of linked resources.
- webtypography.net provides an indepth look at web typography based upon the book The Elements of Typographic Style.
- A guide to web typography from ilovetypography.com
- font Bio: Account for downloadable webfonts: @font-face (by Tobias Otte)
- kernest Bio: Tracking @font-face.
- typekit Bio: Bringing real fonts to the web. From your friends at Small Batch Inc.
- fontdeck Bio: Real typefaces for your website. (I’ve heard fontdeck mentioned in the same sentance as Kernest and TypeKit but the website seems to have been unplugged and their twitter account had seen just one update until today.)
- fontbureau Bio: We sell fonts. Typefaces, actually, but you can get fonts too.
- An Interview With Kernest’s Garrick Van Buren on readableweb.com
- The Sad State of Today’s Web Typography from chank.com.
- Ubiquitous web font embedding just got a step closer — Web Directions
- CSS @ Ten: The Next Big Thing — published in August 2007 but still relevant.
- How TypeKit Will Work by The Brads — a comic about web design.
- @font-face: The Potential of Web Typography — An example of what can be done with @font-face (commissioned by the Mozilla foundation).
- css3.info (self explanatory!)
- An Interview with The Font Bureau’s David Berlow “To understand issues surrounding web fonts from the type designer’s perspective, we interviewed David Berlow, co-founder of The Font Bureau, Inc.” Jeffery Zeldman
- From Default Fonts To All Fonts (in two easy steps?) David Berlow’s proposal for OpenType Permissions.
- Web fonts now (how we’re doing with that) – Jeffrey Zeldman
Last 3 posts in Design
- Halloween Themed Logos - October 31st, 2008
- Erroneous Test Design - October 21st, 2008
- Doctor Snip's Amusing Marketing Ploy - September 12th, 2008
Last 3 posts in Featured
- Make the Apple App Store backward compatible - May 13th, 2009
- Apple Shrink The iPod Shuffle Again - March 12th, 2009
- 30 Different Uses for RSS - November 15th, 2008
Last 3 posts in Resource
- 20 Resources to for Getting Started with WordPress - March 12th, 2009
- links for 2008-11-14 - November 14th, 2008
- Digital Artist Toolbox: An Inspiration For Designers And Illustrators - August 18th, 2008