@font-face — Web designers’ delight, type designers despair?

: Image by thebudman84 via Flickr

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.

“As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.”

Introducing TypeKit written by Jeffrey Veen

“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.

Testing kernest.com

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.

Conclusion

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.”

Open Font Library

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

Twitter

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.