We hear news that Webkit now supports the @font-face CSS property, enabling the designer to specify downloadable fonts in their web pages. I can remember getting excited about this back in June after hearing Håkon Lie talk about it during @media London (check out Richard Rutter’s thoughts on this as well). Legal and security issues will prevent us from using most fonts of course, but I like to focus on the positive here. There are some perfectly useable, free fonts out there — and more choice is better than little or no choice, right?
I wholehartedly agree with Jon Hicks, who writes:
Personally, I’m just happy that we’re reaching a point where we’re having this conversation!
Right! What’s important, I think, is that this helps move things along. Perhaps it will stoke the fire in terms of a real conversation between type foundries and browsers on how things could work while protecting the font maker. Then again, maybe it won’t.
Stephen Coles at Typographica writes something I’d like to counterpoint:
In general, web designers aren’t typographers. Their specialty is in the realms of interface, hierarchy, and navigation. Their training does not include making decisions about what typeface to use for long passages of text.
While this certainly could be true for many, it doesn’t mean that web designers can’t become good typographers — especially when given the chance with more of a variety of typefaces to work with. The worry that all web pages will be suddently ruined with crappy free fonts everywhere overshadows the fact that some good can come out of the ability to at least have a choice to use those crappy (and/or potential useful) fonts. Give us all a chance, eh?
For instance, and maybe this is fresh on my mind after releasing a *cough* icon-based pixel font *cough* just days ago, but imagine using a downloadble dingbat font for displaying icons instead of GIF or JPEG images. Suddenly text and icons become truly scalable together. Just a small example — but one I’d love to experiment with.
Dribbble What are you working on? 
Instapaper Icon design 
Sass For Web Designers Paperback + eBook A Book Apart
CSS3 For Web Designers Paperback + eBook A Book Apart
Bulletproof Web Design Third Edition New Riders 
Handcrafted CSS Book and DVD New Riders 
Web Standards Solutions Special Edition Friends of Ed
34 Comments
Wait a minute.
Why would you do that?
You can create an entire web page with Photoshop as a JPEG, GIF, or PNG, then just use an image map for your links.
That way your site will display the font YOU want (call it Comic Sans… or any other cool looking one), without needing to typea single line of code.
Ya?
hehehe… Kidding.
Cool, this surely is pretty exciting. =)
Hopefully though people won’t throw up bad fonts on every site they create.
Finally a way to make MySpace look even worse (-;
This has good and bad sides to it. Good for the educated people who know what they are doing, bad for the myspace designers who will abuse this privilege in every way possible.
I think it will be scary to see what comes of all of this, though I am happy at the same time.
My only fear in having a variety of fonts available is that the web may harken back to the time when PageMaker was first introduced and desktop publishing became reality. For a few years people created newsletters and other publications that had so many fonts they looked like ransom notes.
Think MySpace looks ugly now? Just wait!
Thanks for your response, Dan. Increasing the creative’s toolset isn’t a bad thing, and the potential for misuse of those tools isn’t a good reason to restrict them. But I just couldn’t gloss over the fact that we’re going to run into some major readability issues across the web when this CSS rule initially takes hold. Let’s hope it does give web designers an opportunity and motivation to learn more about type.
I think the biggest stumbling block is that any good, free fonts out there won’t be too terribly optimized for the pixel grid, since that’s pretty painful work to be doing for no expectation of pay.
Chicken and egg though. Now that the capability exists, maybe so too will the fonts.
BTW, addressing the “dangerous in the hands of amateurs” fear — so’s bright green text on a bright yellow background. Who does that anymore?
It’ll get figured out.
Bringing up the point about how bad MySpace layouts can be in any and every context makes you guys sooo elite.
I’ll just have to agree with Hicks on this one. I’m glad we got to a point where we can discuss this, and I really hope designers and developers discuss this before implementing this. I’m unaware about which other browsers support this – or when they will -, but I am worried that this may indeed become a step towards a new breed of bad web typography.
However, there is always a chance that web designers could become good typographers as you said, and to me there are a lot of “amateur” designers who already make good use of the limited number of fonts and techniques to improve typography on their websites, I don’t believe that adding more fonts to choose from would be worse.
@Stephen said:
“the potential for misuse of those tools isn’t a good reason to restrict them”
Amen! (and thanks for following up here :)
@Dave said:
“BTW, addressing the ‘dangerous in the hands of amateurs’ fear — so’s bright green text on a bright yellow background. Who does that anymore?”
Amen! People are capable of creating very bad web design as is (and sometimes do).
Dunno about the dingbat-font-for-icons idea. I like the scaling, but what would screen readers make of it?
Regarding the icons-as-fonts-so-they-scale-better issue, don’t forget that if Microsoft just supported SVG, we’d all be in good shape on that already. Or, I suppose we could just complain that nobody else uses VML, but having used both, I much prefer SVG.
I don’t think making more typefaces available to web designers will make the overall state of design worse. People actually build sites with Comic Sans now.
I agree with you, Dan, that the upsides are where we should focus. When @font-face takes off, and I really hope it does, not only will designers be able to experiment more with typography (eventually becoming better), but somewhere in all those experiments best practices will seep out as well. We’ll have more conversations, more articles, and more conference talks. The overall result will be a positive.
And, to that end, the more I design interfaces the more important typography gets. Same with copywriting…
Also, I should note that the only real change that @font-face would bring about is a wider array of font choices. CSS already allows limited choice, with “serif”, “sans-serif” and the like. Web designers are already expected to have a basic working knowledge of font selection, so what’s the harm in giving us more choices?
Typography is part of interface design, not a separate thing. And everyone who writes Web pages already has access to MS Comic Sans… there isn’t too much farther down the hill it can go.
But to get to the real point, I think the licensing is the biggest problem with this; not being forced to use awful fonts on the Web can’t be a bad thing. This should have been made to work when it was first floated years ago, when we collectively made the transition from “the cool part about HTML is that the rendering is up to the user” to “I want absolute control”. (Which really does make me wonder why we don’t use PDF now that it’s got hotlinking and embedded rich media instead of very slowly and very painfully reinventing the wheel, just like I wonder why new peripheral device busses are constantly being developed when we have one that’s fast, mature, understood, widely supported, and cheap in Ethernet. Unlike [X]HTML, PDF actually works.)
For those saying Comic Sans is bad… For children and adults with reading difficulties, Comic Sans is one of the easiest fonts to read.
Is it pretty? No, but neither are tanks. Both are sometimes useful.
Brett said, “For those saying Comic Sans is bad… For children and adults with reading difficulties, Comic Sans is one of the easiest fonts to read.”
According to who? Have any measurements to back that statement up?
“but imagine using a downloadble dingbat font for displaying icons instead of GIF or JPEG images. Suddenly text and icons become truly scalable together. Just a small example — but one I’d love to experiment with.”
Font-face would only be supported in new, mostly unreleased browsers. What you’ve described is achievable, as I’m sure you’ve played with, using em dimensions on images. They might not scale quite as nicely as a font does at different sizes (especially when anti-aliased, though using transparent PNGs would help), but I’m sure with a little tinkering, it is achievable today.
Fantastic news (and great site!) – one of my clients is going to be so pleased, he’ll get to use Monotype Corsiva on every page of his new site…
Where did I put that rope?
Brett, if you have any data on the readability of Comic Sans, I’d love to see it, too. Not to call you out, but because if there is a legitimate use for it in some situations, I’d love to know about it. While I think it’s a train wreck in every other respect, if it’s the right tool for a job, I’ll use it.
omg! anyone who said myspace please just get over yourselves. if it was physicaly posible i’d come round and slap everyone of you. myspace is for free expression, it really doesn’t matter if you like it or not so go f**k yourselves bigtime. design nazis make me puke
and that goes for the web as well… once i buy a domain and hosting the site is mine to do exactly as i please, without any input for all of you
I have to say that as with all transitions we’ll go through a period of good and bad implementations of typography with this tool. In certain situations the quality of the design choices will not matter (look at youtube for an example). In the areas where it counts the designers who know what they are doing will be successful and make money. If you have an issue with mySpace-get in there and design a set of templates to sell to make it *beautiful*.
I’ve been wondering who’d follow Opera’s lead implementing @font-face. There seems to be some noise about the security implications, on the other hand I haven’t heard anything we haven’t heard before. Also the font licensing issues seem a bit problematic. Foundries will be forced to deal with this issue and it’s shameful that they so far have neglected to do so. Now they will have to deal with a new wave of elicit use on the web because people are going to use any font they whether they’re allowed to or not.
But I’ve been dealing with issues like this for twenty years now so I’m not too bothered. It’s great that we finally can make the web a bit more design friendly. My biggest issue is actually; how do I make dingbats accessible?
There are some perfectly useable, free fonts out there…
Care to share your free font recommendations for those of us looking to use @font-face without breaking any laws?
good news (and great site!)
Excellent blog
This is awesome, i have been looking forward to something like this for a very VERY long time :)
It’s about time …
Care to share your free font recommendations for those of us looking to use @font-face without breaking any laws?
My first pick to try this technique will be Fontin from Jos Buivenga (I suspect I am not alone in this).
Just noticed this thread ‘reading’ my sitestats. This could/should have a big impact on web typography.
I will look into it and likely review my font license information to allow this usage of my fonts.
I disagree completely with Mr. Cole’s statement. I come from a design background and still manage to build standards compliant sites.
To offhandedly dismiss an entire group of talented creators is both short-sited and indicative of how the traditional design world chooses to dismiss the web as a viable medium for expression.
Take a look at what we have done with print… have you seen a billboard lately???
This is, indeed, a breath of relief for those of us who are sick of using
text-indent: -9999em;Let’s hope that Mozilla follows suit, which may [or may not?] put some pressure on IE to get it’s act together. Hey! Stop laughing, it could happen :-\