CSS @ Ten: The Next Big Thing

117 Reader Comments

1. I remember when web fonts were discussed years ago, and how, when combined with CSS, which was shiny and new at the time, they would help bring our creative dreams to the web. Perhaps the time is finally here when we can get the web fonts movement rolling again. I, for one, am all for it.

2. Thanks for the insightful article. I too have thought this, and yes it would relieve a whole lot of headaches.

   The other alternative to think about us utilizting the Flash platform. Flash can be used to generate the font image and it’s then inserted in your page as a flash image. Still extensive effort – but a good workaround.

   The other thing I have seen a lot of people do is write custom scripts (Eg PHP) that generate image headings etc based on a font. I have used this technique and it works quite well, but still not the ideal.

3. Your point on web fonts is definitely true, though I don’t know if TrueType is the best way to go. What’s the license situation for TrueType? Would Apple open it up or do they make money from it?

   Perhaps we should push browsers to adopt SVG Fonts, whch would be a great solution for this since SVG fonts should be referenceable from HTML CSS as well. Both Gecko and WebKit have bugs open for that, though Gecko’s SVG engineers have said they’re not going to add font support until at least late 2008. Opera already seems to support it. Of course, getting Microsoft to support SVG Fonts would be tough, but getting Microsoft to support pretty much anything new in Internet Explorer is tough.

   I think adding rules that are conditional on which font actually gets used would be a great idea.

4. There are so many bad web designs out there. If you add the capability to use your own fonts, it will definetely get worse. I think there is absolutely no need for an average web page to use an “exotic” font. Might be a good toy for designers, but nothing necessary for the real world (the web pages providing information or commercial solutions).

5. There actually also is a flash alternative for this PDF font solution. Sifr (www.mikeindustries.com/sifr/). I think it is widely used these days even by bigger websites…

6. So basically I have to install software on my Mac for this to work? Isn’t that the same as getting users to install certain fonts on their machine. I’m not talking about cost, I’m just merely talking about the effort.

   Should we then have messages on the home page? “This site is best used with Prince installed”, or have I missed something somewhere?

7. Good argument. And I tend to agree. However I fear what kind of abuse could come from this. Being visually impared I am sure this would only decrease the accessibility of the web for me. Even if I could disable the imported fonts. Because most pages then wouldn’t be optimised for the font I would view it in.

   I like the idea, being somewhat of a designer myself I would love the possibility. But the implementation should not come at the cost of accessibility. And in it’s current state it does. If any clever people can come up with a way around that then I’m all for it.

8. Why are designers so much concerned about fonts all the time? Fonts are over-idealized as if they could solve all design problems, and the complaint that “in print” there are so many fonts available comes up every two seconds.

   The web is not print. I am happy that designers do not have the freedom to bring their favorite fonts from print to the web, because, they are made for printing. Web fonts need to look good on the screen, when they are just 12 pixels high or less, and they should do so with anti aliasing turned off. The provided examples even look bad with anti aliasing enabled.

   There are a few fonts available optimized for screen display. Most of them are pre-installed with all operating systems. Use them and stop worrying.

   And *finally*, stop missing things that you could do with print and start enjoying things you can do on the web. Enjoy the space you have, use scrolling, unlimited colors, animation, etc etc etc … If you can only miss fonts, i guess the web is not your place.

9. MySpace pages can now be made _even more_ illegible! Teens the world over will rejoice!

   Seriously though, I think we should just leave the existing web font set as it is. It’s bad enough that Comic Sans is in there without enabling people to use anything more “exciting”.

10. Though the first three, examples looked great, the next three did not render properly. The final one did. (Firefox 2.0.0.6 Ubuntu Feisty)

11. Some thoughts:
    I think it is far more important to write a good text with decent structure than it is to have a good design, first class fonts etc… (expl. myspace is ugly, still many people visit it => content is king).

    Not many people can make a living of font design so I think that, unless they can protect all the work they put in to it, they are not gonna be interested. (Making a decent font takes skill and many months of hard work.)

    Forcing designers to make a good structure/ valid html / less forgiving browsers is more important IMO.(makes less need for stuff like quirksmode’s front-end gilde.=> webdesign is stuff for pro’s just as gardening, printing,…) Apple made it possible for everyone to be a designer, see how for it has gotten us.

    If we need to support custom type then let it be;
    – open type (One file for Mac and Pc,regular, bold, small caps,…)
    – something we can compress with gzip. 100kb for a custom font is to much.
    – it has to have all the good stuff printed type has: kerning, ligatures,…
    – webreading and printing the page with this font should be possible (sans for online reading).

    http://canvaspaint.org/blog/2006/12/rendering-text/ noticed similar problems with text and the canvas tag.

12. By the way, there already are very popular alternatives to HTML now that allow designers to use whatever fonts they fancy. One is to use an image in place of text. The other is to use Flash, either for the graphics themselves or to do the entire site in Flash.

    Both approaches have serious usability problems unless some very well-informed care is taken. No matter how bad CSS-based font decisions may be, they’ll always be better than images or Flash. Convincing these same poor designers to use real fonts in CSS would greatly improve things.

    For one, you’d actually be able to _shut the fonts off_. In the vast majority of sites, the results would still be readable.

13. First of all, the examples didn’t render properly… or at all. I tried it on both IE7 and Firefox 2.0.0.8. Am I supposed to install soemthing??? If so, what’s the essence?

    Also, I really agree. I’m working on my website at the moment, and I honestly get IRRITATED when the best looking font I can use is Trebuchet Ms. I’m not a fan of the ordinary, and I think we should push aside all these excuses and figure out a way to embed these things already.

14. Thanks for the article. In response to some of the comments: Yes “The web is not print”, but it shares a heck of a lot in terms of the visual design sensibilities. Giving responsible designers more room for manoeuvre can only be a good thing. True, we don’t need a massive amount of fonts to produce beautiful sites, but never underestimate the power of typography. I think Oliver Reichenstein’s post at Information Architects (http://www.informationarchitects.jp/the-web-is-all-about-typography-period) gives a good background to that discussion.

15. @Dragan, Adam:

    Web designers are concerned about fonts because text is the most important thing on most web pages (just look at this page!).

    I don’t see the point of “don’t give them another toy, they only will produce crap with it”: You could ban CSS completely for the same reason. Actually, I don’t understand why web fonts have not been implemented for ages as there is surely a big desire for such a feature. By every text image it spares it makes the web a better place. (the same goes for text shades, by the way)

    And if you don’t like it, turn it off by using your own CSS – I can’t understand why so many people bother with bad web design if they can change it so easily.

16. A standardised way to specify web-fonts would be fantastic.

    No, I wouldn’t expect authors to specify unusual fonts for body text, but for headings and subheadings it would be great. At the moment, the options are:
    * use a standard font (boring)
    * use images (takes a long time, accessibility problems)
    * use Flash (no idea where to start with this one but I guess it takes a long time, certainly has major accessibility problems).

    With CSS to specify web-fonts, all those problems go away. Decent web browsers allow users to easily turn off page styles, so if an author does come up with a horrendous design, with one click it can be replaced by an unstyled but legible and usable page – more easily than if they’ve used images or Flash to display their choice of font.

    And as Nick Smith says, “don’t underestimate typography”. The use of distinctive and appropriate fonts can really boost a web page, and make it far more attractive and professional-looking than one that uses the exact same fonts that everyone has on their computers already.

17. Thanks for responding to the article. Some FAQs are appearing:
    * _the examples don’t work in my browser — do I need to install something?_ The article makes the argument that browsers should add support for web fonts and TrueType. This doesn’t work in browsers today. Prince is the only application where it works, but it’s not a browser. If you want to play today, you must install Prince.
    * _why not use Flash instead?_ I believe in open standards and Flash isn’t one. Also, I think fonts on our screens should — for accessibility reasons — be displayed by the system’s font engine, not a plugin.

    -h&kon

18. Second, Great writeup.

    I was under the impression that the example web pages would render the fonts identically to the images displayed in the article, but I guess I misread.

    I can’t wait until this actually works, seems like it will be a great resource for those who can use it properly.

19. @Herbert, #15:

    I won’t say that text is not the most important thing on the web. And i am looking at this page, it is well designed reads pleasant. This is mostly due to the fact that it uses screen-optimized fonts. There are very few of them that would render well, contain at least most useful unicode characters and have versions in bold, italic and bold-italic. 90% of available fonts that fulfill these criteria are already installed on every computer.

    I don’t know about the Steffman fonts, but the ones from Larabie, like most “free fonts”, as funny as they are, contain ultra-few to none at all characters outside of the ascii range. So they are only useful in a very controlled environment, like a printed page. Or how should people for example write comments on weblogs in such a font when they are not even able to type in their own language?

    Is there some idea that the possibility to “embed” fonts would create a new market for low-resolution fonts? Who would finance the production of such a font, a very labor-intensive project that is essentially about giving away the product? Maybe font-DRM should be built into every browser so that web fonts cannot be used on unlicensed URLs?

    But closer on the subject, the desire to have more fonts: I am not against new toys for designers and they can produce as much great things or crap with them as they want. And i love when amateurs have these tools as well and make more “unreadable myspace profiles”. But the craving for new and more fonts is so old and boring, it reminds me of the 90s when the DTP crowd moved over to the web and put JPEGs with their favorite fonts online. Now at least they are concerned about “accessibility”, but deep down below they feel that fonts is still the way to go. They still do not love the web. (If *at least* there would be an article with a suggestion on how to extend CSS to produce glitter graphics in a standardized way!)

    As for the argument that i can turn off what i do not like: First of all, most users don’t know how to do such a thing, secondly it takes the last gram of seriousness from the design discipline. If design would only about “liking” or “not liking”, essentially about taste, then why should we talk about it in general? Many designers surround themselves with the air of science and the art of engineering, are reading and writing theoretical essays and join public discussions. But when faced with criticism, many redraw to “it’s in the end just a matter of taste” or “just turn it off”. So i think this one didn’t count. 🙂

    What counts is that the provided screenshots in this article display badly rendered characters (in terribly justified columns) in a text that exists just to demonstrate the idea that there is a need for more fonts. I am not convinced.

    I would like to know with what font exactly that is available now the body text of a web page would look better? And why should i help advocating such an outdated dream when there are much worse problems in contemporary browsers?

20. “Perhaps we should push browsers to adopt SVG Fonts, whch would be a great solution for this since SVG fonts should be referenceable from HTML CSS as well. Both Gecko and WebKit have bugs open for that, though Gecko’s SVG engineers have said they’re not going to add font support until at least late 2008.” I agree on this with Richard. MySpace pages can now be made even more illegible! Teens the world over will rejoice!

21. While I agree that the *body* fonts in the provided examples are terribly unfortunate, this does bring up the point that not all fonts are created equal. There are essentially two classes of fonts we need to be concerned about: title fonts, and body fonts.

    For titles, having a large variety of fonts available is very desirable. Let me rephrase that. For titles, having a large variety of fonts available is *very* *very* desirable. Take a look at where image replacement or flash replacement is used today—it’s almost all in headings. It would also be used in logos, except for the fact that logos involve many more graphical elements as well, so people often don’t even bother, and just use straight-up images.

    For body text, there’s a much more constrained set of forms. You can have a serifed font, you can have a Gothic font, you can have different x-heights (within reason). You cannot use terribly strange letter-forms for any long run of text, although you can use it for shorter runs (like summary quotes pulled from the man body of an article, for example.)

    So, here we have a couple of different problems. For titles, there’s just nothing there right now—and I think that in the examples, the title fonts are used reasonably tastefully. The font used for titles contributes a lot to the immediate impact of a piece of work. And it is here that the low variety of font options is the biggest problem at the moment. Flash and image replacement stand for these, but if they could be avoided, it would be a boon.

    For body text, the problem is different. Some commenters here have suggested that because the only fonts that have all of the international features people would like to use are those fonts that are already globally available, there’s no problem. In fact, I think this is just about the opposite of the truth. How many of the commonly installed fonts include the glyphs to render every item on “this page of IPA symbols”:http://www.phon.ucl.ac.uk/home/wells/ipa-unicode.htm correctly? How many users have a font like “Gentium”:http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=Gentium , which provides a variant for handling more stacking of diacritics than most European languages require?

    Having the ability to provide a font with a webpage increases your ability to handle support for special characters of all sorts. It doesn’t give you a single “universally supports everything you could possibly need”? font, instead it gives you the option of providing alternative body fonts based on your own special needs. Do you have a blog for phoneticians who write primarily in English? Perhaps your blog should provide a font with good IPA support to all visitors. If somebody uses very unusual characters for an example (something in “Ethiopic”:http://www.alanwood.net/unicode/ethiopic.html , for example), you probably won’t be providing it automatically—but if the need arises, you could add it to your site.

    (And actually, that raises an important point: whatever fallback mechanism you might use for web fonts should allow a website to say “here are the fonts I want you to use”? and also provide fallbacks for when the character doesn’t exist. Something to allow the phonetician site mentioned above to say “use this font by default, but here are some others to use in case of emergency”?.)

    Finally, if we assume that the reasons above are worthwhile reasons to introduce better font support for the web, we get to the idea that there *are* good reasons to use alternative body fonts. The fonts used in the examples are pretty awful, it’s true, but subtle differences in the geometries of a body font can make a huge difference in the feel of a publication. You can express differences between “official”?, “informal”?, “serious”?, and “light”? without leaving the realm of readability.

    Are people likely to abuse this sort of feature? Sure. Will sites provide tools to help people avoid this? Absolutely. (Look at how much better the demonized livejournals are in the general case, compared to the purple-on-black-moving-starscape monstrosities of the early web, which didn’t even *have* livejournal.) Is this a reason to reject allowing better font support? Not as far as I can tell.

    Do we need better font support for the web, both for general design and for special needs? Absolutely.

22. I used to think that automatic, CSS-based font downloading was a good idea because I was frustrated by the lack of choice. I have observed the development of various plug-ins like sIFR with the same barely concealed disdain I have always had for Flash, because I feel that web pages should be built purely from open web standards. 5 years ago, I would be the first to cheer the introduction of a properly supported font downloading standard.

    As the entry barrier for creating web content has dropped lower and lower, the quality has fallen equally precipitously. For every slick and attractive “Web 2.0” site emerging, hundreds of ugly MySpace/Facebook/Whatever “sites” spring up that seem to turn back the clock to the dark days of web development in the mid ’90s. Animated GIFs and blinking text have been (partially) replaced by dozens of different media players.

    So now I view any new web technology with a good deal of skepticism. We are now talking about giving these purveyors of web garbage access to a practically limitless number of fonts. It will certainly make life easier for proper web developers and designers, but it will also make the web messier because of the MySpace crowd. Dare we let this genie out of the bottle?

23. bq. I don’t know about the Steffman fonts, but the ones from Larabie, like most “free fonts”?, as funny as they are, contain ultra-few to none at all characters outside of the ascii range.

    In general, the Steffman fonts have wider coverage outside of ascii. For example, I can write my native Norwegian in them (including æøå). In the cases where glyphs are missing, the CSS font alorithm will ensure that the text is still shown.

    Web fonts will also allow people to make fonts with Unicode coverage wider than mainstream fonts. For example, a web page could point to the DejaVu fonts:

    http://en.wikipedia.org/wiki/DejaVu_fonts

    I expect more “open-source” fonts like these to appear when they can easily be used in web pages.

    Cheers,

    -h&kon

24. bq. There are essentially two classes of fonts we need to be concerned about: title fonts, and body fonts.

    Agreed. I wanted to use different fonts to show the range in the examples, but for body text in production pages, it is better to use a body font. These can, for example, be Arial (which is already installed on many machines) or the “Liberation fonts”:http://en.wikipedia.org/wiki/Liberation_fonts from the web.

    So, don’t consider the examples to be style guides — I’m sure you can do much better!

    Cheers,

    -h&kon

25. bq. So now I view any new web technology with a good deal of skepticism. We are now talking about giving these purveyors of web garbage access to a practically limitless number of fonts.

    Yes 🙂

    They have that access already, though: background images.

    Cheers,

    -h&kon

26. This is going to be long one… How about taking an easy rout? How about asking Microsoft to add more new open source screen optimized fonts? They have emails and phone numbers, someone should just call them. If they do so, next morning we would have 70% of users having those fonts via Windows Update. MacOS X and all flavours of *nix would follow. Problem solved in a matter of a week.

27. bq. This is going to be long one”¦ How about taking an easy route? How about asking Microsoft to add more new open source screen optimized fonts.

    I believe they have made/commisioned more fonts, but they have also closed their “Web Core Fonts”:http://en.wikipedia.org/wiki/Web_core_fonts program. Despite “requests”:http://www.theregister.co.uk/2005/02/11/hakon_on_ms_interroperability/ the program has not been restarted.

    If Microsoft makes more fonts freely available, they can also be used as web fonts.

    Cheers,

    -h&kon

28. bq. whatever fallback mechanism you might use for web fonts should allow a website to say “here are the fonts I want you to use”? and also provide fallbacks for when the character doesn’t exist. Something to allow the phonetician site mentioned above to say “use this font by default, but here are some others to use in case of emergency”?

    CSS has this; you provide fallbacks by specifying a comma-separated list of fonts. Web fonts do not alter this mechanism.
    Cheers,
    -h&kon

29. This idea has been rounding my head for quite some time. I can only say that I totally agree…
    I wrote about that (among other concerns) in a post at my blog (http://electriblog.com/?p=48). I have also other concerns about how dependant we, designers, are of a few software companies, and the need for a free design movement similar to the free software movement, wich I expressed here: http://electriblog.com/?p=96
    And to suppor this idea I’ve published a post (http://electriblog.com/?p=99#) I had parked for months, expecting a clear sign of change, wich I’ve just read in this article.
    Kudos to you for expressing it in such a clear way and voicing this specific need of designers.
    To all designers: Support free fonts and the Open Font Licence! Free the Type!!!

30. bq. CSS has this; you provide fallbacks by specifying a comma-separated list of fonts. Web fonts do not alter this mechanism.

    Right, but doesn’t that only fall back if the font itself fails to exist? The OP was referring to missing characters in an existing font.

31. I like the idea of more font choices but agree that bad design will probably get worse. Although, this would probably create a greater need for talented web designers or at the very least help to separate the good from the bad.

    A few things that ran through my mind:

    1. It would be nice to have a variety of web fonts that have been created and categorized by their metrics to match up with our current set of fonts. This would help a page degrade nicely in older browsers with minimal fiddling around.

    2. Web fonts do not address the issue of commercial fonts used in corporate identities. A logo or other branding that is font-specific would still need to be an image.

32. If you limit this to TrueType it seems to me you immediately make it obsolete. Why not make OpenType fonts compatible as well? Most Mac systems use OpenType.

33. Seems to me that web fonts will be seen by some of the major foundries as a threat, since inevitably people will use commercial fonts (even though it’s technically illegal), and font piracy will become even easier than it is now.

34. @ HÃ¥kon (“#17”:http://www.alistapart.com/comments/cssatten?page=2#17) –

    from (http://www.mikeindustries.com/sifr/):

    bq. sIFR is fully accessible to screenreaders and other assistive technology. Don’t take our word for it. Ask Matt May of the W3C who endorses it as an accessible method to create rich typography on the web. Or ask Joe Clark, one of the world’s leading accessibility experts, whose interest in typography is only trumped by his interest in accessibility.

    So then is you only issue with the currently available flash solution is that it isn’t an open standard? I’d say this is a small price to pay for something that actually works, now.

    Otherwise all we are talking about are cool things that browsers should implement. In which case, we can come up with a very long list.

35. Implementing a choice for designers to specify fonts is no different than any other presentation choices CSS gives you. There will, as always, be bad design. Let’s not rule out the possibility of good design in a fit of ideology.

    Besides, adding this choice may spur the creation of many more fonts that do work well on the web, expanding the web font set tremendously.

36. #33 Gabe: yes, there are big corporations interests in typography, mainly from Adobe, Apple, Microsoft and major foundries. But to deny this mechanism to designers is like denying the ability to see images because it is potentially a way to infringe images’ copyrights.

    I always laugh at people saying “why give designer another toy?, there will be a lot of crappy designs!”. It’s as absurd as saying “why give programmers object oriented programming or APIs?, they’ll end up writing crappy code!”
    What’s important here (and what everybody needs to understand) is:

    To have the ability to specify a TrueType (or another, free, standard font format) in a web page *will* *not* make a page less readable, *will* *not* affect accesibility (content is separated from format, remember? and you’ll have the ability to turn custom fonts *off*), *will* *not* affect the existing amount of crappy design (crappy design happens, either you have downloadable fonts or not), *will* contribute to more pleasant and readable design, *will* save bandwith from images used as text, *will* save designers from using obscure or propietary solutions to display fonts (like sIfr or Flash) and *will* *not* affect users using old browsers, since it would degrade.

    I want to stress that, if this is one of the most petitioned features by designers, it’s not because we want a new toy to play with. Fonts are at the core of our profession, are the building blocks we use to form words. It’s difficult to explain how important fonts can be to a designer, but to put it simple, typography is a way to transmit personality through text in a subtle way, without interfering with the message.

    And also, it’s very important that designers create suitable fonts either for display and text to be send on the web. We need to show companies and foundries that we are going to respect their copyrights. That we can generate our own font to use. And those fonts need to be published under the Open Font License.

37. Besides design web fonts can be served from the server to display languages such as Sumerian, Cypriot Syllabary and many other languages of academic interest that are not currently available, unless the user has them installed on his computer. (Not to mention better support for dingbats, diagritical marks and the like).

    I am all for the idea to incorporate web fonts into browsers and if IE can do that quicker than anyone else I will ditch my favourite FF!

38. It’s true that sIFR tries to keep the content accessible; the underlying markup can be decent. However, there are still issues. For example, I can’t cut and paste text when Flash is used to render text and I can only use the solution on platforms where Adobe chooses to release their plugin.

    If possible I’d like to avoid using two Turing-complete engines (Flash, JS) when a declarative solution is within reach. (TrueType actually contains executable code, but that’s a different story.)

    Cheers

    -h&kon

39. bq. If you limit this to TrueType it seems to me you immediately make it obsolete. Why not make OpenType fonts compatible as well? Most Mac systems use OpenType.

    It’s important to establish a baseline format, and I think TrueType is it because (a) most fonts are available in the TrueType format and (b) it’s widely supported by renderers, e.g., FreeType. When FreeType (or other popular and freely available renderers) supports OpenType, it will also be a suitable format.

40. “This doesn’t work in browsers today. Prince is the only application where it works, but it’s not a browser. If you want to play today, you must install Prince.”

    Aside from the rounded corners, the first three examples render properly for me. Why is that? (Firefox 2.0.0.6 Ubuntu Feisty)

41. Its only a matter of time.

42. The fact is that bad designers can use any font they so choose anyway, through images. How is it any worse to use web fonts instead? They’ll just keep doing the same thing, but they will at the very least chuck the images, one would hope. For those of us who are good designers, it simply means that we will have richer websites, and no limits on our creativity. It seems to me that some people are trying to make the point that we should prevent advancement and growth in the industry because of how it MIGHT be misused. Suppose that same line of thinking had prevented image or flash use? Both have their place, yet can both be mis- or over-used, and the case is the same with fonts.

43. I have been waiting (that too very eagerly) for something like this for quiet sometime. And thought TTF is not my first choice (I would like something along the line of FreeType)…
    I also disagree (and that too very storngly) with anyone who thinks that this will add to the mess on the net.
    I see their point, but those “phases” usually are a part of the learning curve. I mean sure people will use wrong fonts and things will look ugly and myspacy but that already happens on print – and just beacuase people are not using the technology right doesn’t mean that the technology should not be developed! I mean, are we going to stop selling knives because people misuse it?!!

    Power to the people… 🙂

44. Part of me dreads to possibility of ugly fonts taking over the Web, and I foresee something that may look as badly as what you see on MySpace.com after newbies get their hands on HTML for the first time.

    One solution I like (but haven’t used myself yet) is with Sifr (www.mikeindustries.com/sifr/)– when used subtly. It seems to work well enough, but not for browsers without Flash installed (including my iPhone!). Of course, there won’t be ONE solution to this but many.

45. Thanks for the interesting article. An alternative way to make heading images is to use a control to dynamically create them from a custom font which is installed on your machine.

    Our tech guy wrote an article about this and put it on the Code Project website:
    http://www.codeproject.com/useritems/Dynamic_Headings.asp

    Please note – we do not advocate using images for headings but when there is no way around it this sure beats creating them manually!

46. Hi HÃ¥kon!

    Thank you for a wonderful article! I wonder if you could comment on the technical feasibility of the following idea. I believe some version of this has been discussed before, so it is not a new idea as far as I know, but to someone like me it seems to be a good idea, and it would be interesting to know your thoughts on this. Anyway, the idea is to require the user to have ANY UTF-8 font available on their system and let CSS tell the browers SVG-renderer to draw a font that looks like Times, Helvetica or whatever. If this is possible, the user only needs ONE font installed and browsers styles it into whatever the designer wants it to look like. If the browser has seen this styling before it could cache it to render faster the next time round. Is this a horrible idea?

47. As I said earlier, I like HÃ¥kon’s idea. But it might make web surfing a bit less safe, as the browser gets to handle binary files – and I suppose rendering text from a font happens deeper in the system than rendering an image. I’m not a security expert, so maybe somebody here can say something more competent about that.

48. Working for a large company that uses many, many, many overly expensive paid for fonts this would be a legal nightmare.
    The idea of sticking what is essentially a link within some css to the a font that we paid hundreds of pounds for and which is covered by copyright would be as much business suicide as for instance sticking a chart mp3 on the home page of the companies site.

    Then there’s the general MySpace syndrome that seems to have vomited its way on to the internet (previously GeoCities syndrome)which has shown us that the current allowance for quite a large range of typesets can be abused and misused to create horrors beyond the minds imagination.

    With the current state of web-design and all the features, standards and methods available for creating better web-pages this seems too much like pandering to pointless aesthetics and to me appears more of a step in the wrong direction then anything else.
    It’s bad enough being expected to read comic sans surrounded by clip-art on naff business sites without having the horrors of users choosing obscure grunge fonts for body text.

    This is one idea that people need to step back from, walk away and have a damned good think about.

49. bq. (Disclosure: I’m on the board of YesLogic, the company behind Prince. Being on the board is a neat way of pushing for your favorite features to be implemented.)

    It’s fascinating that being on the board of a corporation seems to be a more powerful position in technical regards than being CTO of another one.

    Some commenters stress the point that “Web is not print”? and fonts therefore had a lesser importance there. Although that phrase is true in so far that Web is not equal to print, _Web is also print_. Furthermore, CSS is not limited to the Web.

    There are thousands of (expensive) corporate design manuals calling for certain fonts (that are not provided with Windows), some corporations even have custom typefaces made for exclusive use. Why would they want their homepage to differ from the rest of their publications? After all, they do put style-final, CI-compatible PDFs online instead of HTML+CSS. Sure, they could lose exclusiveness if font files were freely available, but right now, on the Web, they don’t have it to lose it.

    Fonts are different from images in terms of numbers, variation and ease of creation. They are similar in file size, but fonts can be reused much more often. Therefore browsers should probably cache fonts longer. Some implementers may choose to cache them separately anyway, in an encrypted format to hinder user access and thereby doing their part of basic DRM, which would be completely useless of course, because the download location is visible to anyone with even the slightest knowledge of CSS. Any useful protection of intellectual (i.e. artistic) creations would have to include the transmission layer. Microsoft mostly failed with its proprietary format (Embedded Open Type, EOT), although it is in use for scripts with limited default support by browsers and operating systems (e.g. in India). There is something to learn from EOT’s flaws, but I’m not sure to which solution this should lead us. Maybe the best solution was a central font (file) registry which keeps track of licenses and download locations (and thereby copyright infringements); it would be queried by browsers automatically to verify the legality of a webfont and to get a key if the font server also implements download restrictions.

50. Let’s shut down the internet. Some people will (and even do) use it to spread child porn, terroristic propaganda and other evils.

    There’s still the responsibility of the designer, developer and content manager to make/keep things beautiful, usable, accessible and legal. That’s the same as it is now. There will only be more opportunities, which can be used to make it both better or worse.

    @Chris McKnee: your company will not be forced to use these fonts on their website.
    And during the next styleguide update your company can ask the designer to add a web styleguide as well, using open source fonts. Maybe these are not the same as the ones used in the styleguide for print, but there’ll be probably one or two that match better than those that you currently use on your website.

51. Thanks for the interesting article, HÃ¥kon!
    I assume that we can look forward to Opera support for Web Fonts in the near future then?
    Opera 9.5 is out soon-ish, isn’t it – will this feature make it in?

    Dunc

52. @Sander Aarts

    Interesting opinion, but I wouldn’t go as far as to compare fonts to child porn, that’s just ridiculous.

    And no the company I work for wont be forced to include fonts in its pages, but it’s a bit naive to assume that just because we can include a feature into a web-page we therefore should.

    As previously stated by Mr Päper, if this kind of technology is added to a specification and in actually becomes common place in browser rendering technology then you can guarantee that some form of DRM will be required, and we all know how everyone loves DRM.

    All of this just seems a whole lot like an answer to a question nobody asked, and I don’t see any real considerable benefit from implementing yet another aesthetic, bulky feature into the standards.

    As many, hopefully, know a font is generally made up of several files each giving it its characteristics.
    For example if you wanted to use Apple Garamond and its extras (bold,italic,bold-italic) you would be sending an extra 4 files and in the case of Apple-Garamond, 356KB of files being rammed down the users line on top of what ever other fluff you have in the page (images/flash/video).

    I couldn’t really give a damn if people use Zapfino Extra as their font, by rights I don’t have to view their page and if necessary can always turn their style sheets off. But page weight, regardless of broadband, the extra server bandwidth required, the DRM required for commercial fonts and the cost involved with all of these is an issue that will come to all.
    Then there’s further into it when the DRM removal tools are all over the web.

    Sounds fun?

53. There are many here who are concerned about bad designs made worse with bad fonts – and I concur. But what if you could only we could only use custom fonts for headlines, and paragraphs would only be allowed the standard web fonts available today? (of course, then folks would just make paragraphs with headline tags!)

54. I’m not sure I understand the sentiment that something should not be developed because it will get abused and we’ll all have to suffer inelegant design.

    Who made any of us the design police? If some jackal makes a website that you can’t read b/c he used a ridiculous font, y’all know how to get around that. And assuming that you won’t be using appalling fonts yourself, you don’t have to worry about UX being hampered by poor fonts.

    The best argument–and it’s a damn good argument–for not developing this is for legal reasons. But all the whining about “other people” making bad designs is sort of…well, hilarious.

55. The major complaint people will have about this has to do with bad design, and let’s be honest: Because good designers are a minority, the majority of all web pages are and always will be less than ideal in some significant way.

    “Design” is inherently arrogant (even when I do it), and the vast majority of designers have little concern for end users with special needs. The use of web fonts makes it much easier to foul up the essential job of simply delivering the goods, because it will almost guarantee a proliferation of half-baked font styles.

    What if I simply can’t read some silly typeface a designer has linked via CSS? Most user agents (browsers, etc.) allow me to turn stylesheets on or turn them off, and nothing in between. So my choice is to suffer through reading the unreadable, or to discard ALL structural benefits of the stylesheet because the typeface was poorly chosen.

    If we established a dozen universal fonts, selected for their exemplary readability, I might go for this idea of web fonts. But this will be a train wreck for accessibility if it isn’t somehow restricted.

56. They might as well be using it for headers and whatnot. As far as I know, any serif/sans-serif font available on any, if not all, browsers would do just fine for paragraphs.

    I mean, who would want a block of XHTML/CSS in a typeface similar to the (somewhat excellent) 16th century typefaces?

    …although that would be humorously entertaining and irritating at the same time.

57. Despite the flood of BAD design that this would release on the web, I would love for web fonts to become a supported standard.

    I think it would be great if there were a form letter that we could email to the development teams of various browsers requesting this support. I would create one myself but I am a terrible writer. Any takers?

58. bq. The best argument against web fonts, however, isn’t legalities—it’s aesthetics. Do we want to wade through web pages displayed in third-rate fonts put together by designers who once used the tag and created backgrounds with animated GIFs? Probably not.

    Er, you don’t ‘wade’ through the web. If you don’t like a website’s design, you could (gasp) not visit it.

    However, it is of course possible that you might accidentally see an ugly web page one day. And I suppose it’s just not worth the risk — I think it’s best if you go and sit in a barrel where you’ll be safe.

59. and thanks for a great article, HÃ¥kon!
    I am wondering how pointing to these external .ttf files might affect the speed of web page download. Font files can get rather big size wise. External font provider servers will need to be really robust speed and bandwidth wise.
    Anyway, it’s a great idea, IMHO.

60. CSS already supports ANY compatible font you can install, it just doesn’t download fonts you don’t have. No need to change the CSS, the browser could simply offer to find and install a font for you if you don’t have it. It could even offer to take you to a purchase page for commercial fonts, or drop back to the closest free alternative.

61. bq. I am wondering how pointing to these external .ttf files might affect the speed of web page download. Font files can get rather big size wise.

    Most of them are quite small, roughly the size of a picture. The Steffmann fonts, for example, are typically around 60k.

    If bandwidth is a real concern — e.g. for mobile use — the browser can choose not to download the font.

62. bq. the idea is to require the user to have ANY UTF-8 font available on their system and let CSS tell the browers SVG-renderer to draw a font that looks like Times, Helvetica or whatever. If this is possible, the user only needs ONE font installed and browsers styles it into whatever the designer wants it to look like.

    Interesting idea, but I think it takes styling one bridge too far. I doubt you will be able to generate, e.g., Larabies’s fonts from one normalized font and some styling info. Further, I think the systems’s font renderer should be used for rendering fonts; it tends to do a better job by, e.g., honoring hinting information in the font files.

63. bq. Web fonts do not address the issue of commercial fonts used in corporate identities. A logo or other branding that is font-specific would still need to be an image.

    Yes, SVG is suitable for this kind of information. You can also encode logos in fonts, though, as long as you map the symbols to the private use area in Unicode.

64. bq. if this kind of technology is added to a specification and in actually becomes common place in browser rendering technology then you can guarantee that some form of DRM will be required

    There is no need to add anything to the specs; the requested functionality has been in CSS2 since 1998. What’s needed is implementations. Some people will probably ask for DRM, but I don’t think we — the web community — should accept it as a requirement. Microsoft have been supporting DRM-ed fonts in IE for years, but even IEs dominating position has been unable to make fonts part of the web.

65. I understand everyone’s fear of bad design, but should that prevent us from stepping forward? No one doubts that if this was accepted into a new CSS standard that the designer’s toolkit would open up greatly.

    I actually like the idea of opening up the font choices to everyone, because without bad design there is no good design. It would be an opportunity to further distance the professional designers from the rest of the masses.

66. The potential for piracy, making the web an uglier place, and bandwidth consumption are all red herrings against implementation. Point of fact, there is no argument having yet been made here that would not equally have applied to a discussion regarding the implementation of a mechanism for the inclusion of images, video, audio, or any other component of web page content. Yet, inclusion of those media are indeed implemented.

    On the DRM, I fail to see how the protection of fonts is any more important than the protection of any other media. Images, copy, design elements, and, heck, even whole websites are being blatantly copied all over the web. Piracy will happen through other avenues. DRM for download-on-demand fonts will not change that anymore than video take-downs on YouTube has thwarted bootleg movie distribution through P2P or other outlets. Interestingly, I also seem to recall several competing hypertext projects noting the lack of rights management and royalty management as a severe issue with the fundamental architecture to the web (Xanadu, anyone?).

    The bottom line on DRM is that you can’t just add it in retrospect to a system what chose to ignore the issue for as long as it has. This is partially our fault for the “Free stuff! Now! Gimmee!” web we were used to from before the tech bubble burst. Now, we are having to sleep in the bed we’ve made. However, as always, there will be ways to address the issues brought forth.

    As an example, we have many legitimate stock photo outlets that do, in fact, get used. In the same vein, we have free stock photo outlets whose traffic I’m sure are not lacking. The basic customer dynamic of media markets is simple. Those who won’t pay will, more often than not, use good-nuff’ approximations (knock-offs). Those who will pay will, more often than not, buy the real thing for a reasonable price. The force that drives piracy on tools like this is scarcity — not being able to find and/or purchase the media via legitimate channels. Rarely will one having either the means or ability to find a close alternative opt to pirate. Scarcity is the problem with music and movies, because close alternatives simply do not exist. The current existence of legitimate avenues for obtaining both free and paid fonts makes DRM a moot point. Those who would pirate despite alternatives and means would not start buying stuff simply because DRM were put in place, anymore than this strategy has worked to increase music sales. If anything, it hurts the industry by preemptively criminalizing the potential user and unnecessarily complicating technology in general.

    As for bandwidth, that hasn’t stopped embedded video or Flash. It won’t stop font usage, nor is it a greater barrier than bandwidth consumption perpetrated by other media. We have compression technology. Let’s use it.

    Oh, and as a last point, let me say that the Web is going to be just as ugly whether people use image replacement or custom fonts. Bad design is bad design, no matter the quality of the tools used. You can use the finest canvas, brushes, and oils, yet it still will not make stick figure art any more Van Gogh.

    In the absence of any truly compelling arguments against it, I say bring on custom fonts.

67. what worries me most is not the creation of bad design with the wrong typography but the fact that webdesigners have yet another point to add to the “browser-backwards-compability-checklist” and we are not talking “backwards” yet, as you rightly pointed out there is not much TrueType web font support at the moment.

    It is all a matter of getting the browsersupport and thats why I think it will take at least a year until TrueType Fonts really see the light at the end of the tunnel.

68. Chris McKee:

    bq. Working for a large company that uses many, many, many overly expensive paid for fonts this would be a legal nightmare. The idea of sticking what is essentially a link within some css to the a font that we paid hundreds of pounds for and which is covered by copyright would be as much business suicide as for instance sticking a chart mp3 on the home page of the companies site.

    I don’t see why this would be a problem. There are controls in place to prevent people ‘hotlinking’ images where the owner doesn’t want them to appear on other people’s websites. The same could happen here. You would buy a licence to use the font on your website, and the font’s owner would maintain a list of sites with such a licence. When the font is requested from a page on one of those domains, fine; when the font is requested from a page on another domain, it returns an ‘unauthorised’ error and the browser can’t download it.

69. Seems working on opentype also.

    ciao
    Livio

70. The six new Microsoft fonts that are currently debuting in Vista and new Office installs (Mac and WIndows) are quite a leap in terms of screen-optimised typography, and something that this article neglects to mention. Ok so it’s not the revolution that using any font you like would/will be but it’s surprising how few people know about the new fonts and how ubiquituous they are going to become in the next couple of years. Using hinted fonts, especially for body text really is a must with the latest sub-pixel rendering technologies, and I for one really won’t be impressed when wannabe Bauhausian web-designers start laying out pages of 10pt Futura or similarly innapropriate fonts for the screen

    http://www.modernlifeisrubbish.co.uk/article/new-vista-fonts-and-the-web

71. The six new Microsoft fonts that are currently debuting in Vista and new Office installs (Mac and WIndows) are quite a leap in terms of screen-optimised typography, and something that this article neglects to mention. Ok so it’s not the revolution that using any font you like would/will be but it’s surprising how few people know about the new fonts and how ubiquituous they are going to become in the next couple of years. Using hinted fonts, especially for body text really is a must with the latest sub-pixel rendering technologies, and I for one really won’t be impressed when wannabe Bauhausian web-designers start laying out pages of 10pt Futura or similarly innapropriate fonts for the screen

    http://www.modernlifeisrubbish.co.uk/article/new-vista-fonts-and-the-web

72. bq. Point of fact, there is no argument having yet been made here that would not equally have applied to a discussion regarding the implementation of a mechanism for the inclusion of images, video, audio, or any other component of web page content.

    Really good point; I hadn’t considered that. Thanks for reminding me.

73. bq. When FreeType (or other popular and freely available renderers) supports OpenType, it will also be a suitable format.

    That would be “right now”:http://freetype.sourceforge.net/freetype2/index.html#features”

74. I am absolutely bummed by the amount of people who think this is a bad idea. I thought more designers read this zine/blog/site whatever you want to call it. The lack of foresight and fear of change by many of you is astounding. I’m truly disappointed in the so called “designer” community here.

    It’s also disappointing the amount of people who still pick on Flash at every opportunity. Give it up…seriously. It’s tired and you’re never going to win.

75. Font descriptors, the ‘@font-face’ declaration, and all associated parts of the font matching algorithm have been removed in CSS 2.1.

76. bq[en]Font descriptors, the ‘@font-face’ declaration, and all associated parts of the font matching algorithm have been removed in CSS 2.1.

    The entire purpose of revision 2.1 is to bring CSS in line with technology that had existing or experimental implementations in modern browsers. It was revised so that people referencing the specs as gospel would not be lead astray, and so that folks like you who quote the specs don’t look like an idiot when the real world doesn’t follow the rules in some recommendation what purports to be how things should be if the spec makers ran things, not how things actually are in a world where they don’t.

    CSS 2.1 is no more written in stone than HTML 3.2 was with its exhaustive list of styling attributes and ridiculous elements like . If it was removed in a revision, it can be added in another revision — especially given that it adds functionality instead of removing it, which would be nigh impossible to do, as demonstrated by quirks mode vs. (X)HTML Strict.

    Nevermind that it is not part of the current spec, nor get hung up on the fact that it has been removed once before because the technology wasn’t there and the debate was. Embrace the need and influence the specs to come.
    

77. By the way, textile is not humane. It is a pain in the *expletive deleted* and messes with punctuation.

    It’s funny. As much as the development community spews forth the wisdom of not reinventing the wheel and following established standards, it seems we are all too eager to do so when it suits us.

    Making up new markup syntax is about as non-standard and square-wheeled as you can get. Come on. Proper filtering of HTML is much better. It is not that hard to do and such laziness is not befitting a community of innovators.

    It would also help if the preview would work right. *Ahem*

78. I was excited when reading this article and looking at the presented examples but I have my questions when it comes to cross-browser friendliness. I tried the examples on a Mac and they didn’t work, which quickly shot down my dreams of using it anytime soon.

    It is encouraging to see it coming up again, and I can definitely see how this would positively impact my day to day work, but until it works across the board I can’t adopt it 100%.

79. I’d welcome this type of font embedding. SIFR is clever, but it seems somehow over-elaborate when all you want to do is render a font.

    This solution meets the needs of designers, those who need real text for assistive technologies and will gracefully degrade if you don’t want to/ can’t download the specified font.

80. We already know that fonts that the system already has can be implemented. Couldn’t we come up with a javascript and service side code (PHP, ASP, Perl, etc) that could make a link saying “Please download this font”?

81. http://www.lalit.org/lab/fontdetect.php

82. I liked the article very much, but there is one thing I’d like to correct.

    * A *typeface* is the actual design & spacing of a family of characters.
    * A *font* is mechanism for recreating a typeface — This can be a digital file, molded letters, stencils etc.

    People who design *Type* are called *Type designers*. A completed family of characters they create is called a *typeface* . To recreate their typefaces, other designers use *fonts*.

    So it is accurate to say:
    In the future, designers will have the option to use more typefaces by allowing web browsers to download fonts used in their websites.

83. With regard to the font-face and name copyright issue, those of us who have designed fonts which are available freely should have an option to make them available in a webfont format. I think it appears to be quite the cop-out by the browser makers that this would be an issue. Take for example another product, freely available (like most modern browsers), OpenOffice suite. There is very little that can be done by M$ to thwart the use of said product, due to the fact that there is no profit except by those using the product. Let us apply this to the use of a font from some foundry, which the designer of some website uses, whether purchased or pirated. This is the designer’s responsibility, or in the case of someone rifling the font from his site, the end-user’s responsibility. Legal BS by companies only goes so far, and they should accept the fact that there is always some bit of piracy for the larger portion of good citizens. This should not stifle the improvement of the web experience by restricting the use of technologies over simple copyright, they only the provider of the translator, not the fonts themselves.

84. “””
    I am absolutely bummed by the amount of people who think this is a bad idea. I thought more designers read this zine/blog/site whatever you want to call it. The lack of foresight and fear of change by many of you is astounding. I’m truly disappointed in the so called “designer”? community here.
    “””

    You said it.

    These arguments of “people will make ugly pages” are completely absurd. They already DO. It’s a good thing people with this mindset never prevailed or we’d all still be sitting around using “gopher”:http://en.wikipedia.org/wiki/Gopher_(protocol) and such.

    Very very disappointing crowd here for the most part these days.

85. Rather than having fonts scattered all over the web at multiple URL’s which invites anyone to post and use a pirated font (and opens up security concerns), what we probably need is some sort of body to oversee the “web fonts” with a centralized font server.

    I’d hate to add more bureaucracy to the mix, but I think this is a solution worth investigating.

    That way all fonts are centralized, and can have some sort of authentication and review process. Font designers could submit their fonts for inclusion to the web fonts library, and a community could be built around the concept.

    Recommendations could be made on minimum font sizes for the busier fonts (doesn’t mean people will heed them, but they will be warned)

    This potentially would eliminate the need for the extra css code, as the css would first check on the local system, then check in with the font server. (seems like a minor update would take care of this on the browser side, too)

    As I said, this adds a layer of bureaucracy, but perhaps the w3c or some other organization could extend itself to take care of this.

    Of course, you can’t please all of the people all of the time, so some people wouldn’t like this setup, but it’s much better than what we currently have!

86. As a developer who often gets involved in design issues, I often find myself torn.

    While having access to a multitude of fonts would be nice, being restricted in the way we currently are does focus things on clear and elegant design – which I think is a good thing.

    You only have to look at MySpace profiles to see what could happen if the floodgates were ever opened…

87. Well not format – but something that would be encrypted that says “free for use” or not..

    Of course that would be a DRM thing.. And that just makes things more complicated….

    Of course it would all get hacked..

88. Why would we have a central font server system? That’s plain ignorant. The load would be such as to make it financially insane to build and maintain. Not to mention that the custom font option would be rendered useless to designers, simply due to the fact that including even one custom font that had to come from a central font server system would slow down the page load to a crawl worse than dial up. Simply put, there is NO WAY that ANY centralized font serving system, EVEN without doing any processing that would add protections for copyright owners or whatever, would EVER be able to handle the load, NO MATTER HOW BIG IT WAS SCALED, to serve even a fraction of the entire web. PERIOD. Never mind that no matter how many users download a font and store it on their computer, there are a ZILLION fonts and a central server system would never shrink its workload due to this fact alone. People will continue to create new fonts, more fonts will get added to the registry, more fonts will be used by designers, and no matter how many fonts a user installs, they will hit the font servers every time some designer specifies a new font. There is no way to wrap a business model around that that could even come close to covering the usage scenarios. Never mind the startup capital just to keep the system from crashing and burning the very second it comes online. Sorry, bad idea.

89. The only way I can think of that would work and protect font creators would be to require licenses on the server for the font in question that could be verified by a standard scheme, like SSL certificates. Font downloads would not happen if the license “certificate” is expired or fraudulent. The license could be simply signed using public/private keys that could be validated by the browser with the font designer’s public key.

    The only way I can think of to handle the demand in a secure way would be to use a decentralized registry of public keys for various font creators. The browser would cache the key data, so that verifying the next site’s authorized use of the font would be faster and not have to hit the registry system to look up the key.

    The registry system itself would be split into many trusted registries hosted around the world, much as the way in which DNS works. The browser would simply need to be able to query a root registry system once that doled out a geographically local list of trusted registry IP’s and then the browser could use the registries on that list to verify the public keys and download the font from the website they are visiting.

    I’ll grant, it’s not necessarily the most simple thing in the world, but it’s feasible and allows ample protections for both web designers/site owners and font creators.

    Such a system wouldn’t necessarily be limited to managing fonts, either.

    Though I think the whole DRM issue is moot, I figured I’d share what seems to me to be the obvious way to deal with it if the devil has his way. Maybe he’d do it this way instead of a much more evil and intrusive approach.

    Cheers.

90. Thanks for the in depth coverage. A colleage of mine passed a link my way about something like this a few weeks back. Cool to see it in action!

91. As someone who despises being forced to be a box-stacker and “Arial, Verdana, sans-serif” fanatic, I love the possibilities of web-based font displaying becoming more universally-available.

    Of course as a professional in the design world I will always prepare for the out of date and stubborn viewers. But this is like a light coming on in the very free and diverse world of web design.

    And with regards to the worry that mom-and-pop people will use this poorly, it’s going to be such an industry-deep function, it’ll be off their radar.

    I’ve tried it with some standard and some foofoo fonts, and the only major issue I can see is tweaking with the sizes to eliminate the harsh pixelization. “Point” size is far better than “pixel” size declarations for text. And anti-aliasing is not gonna happen for a long time. if ever.

    But I will enjoy this and share it with my peers in the biz!

92. This sounds unbelievably helpful, and yet I can see where concerns could be founded; I myself am doing a redesign of a website (the original pages were created by the client) which had the exact problem mentioned in the article. The old page’s body text was Papyrus. Ouch. Not only ugly, but not everybody has it installed, causing the page text to default.

    All the same, the pro’s outweigh the con’s. I would really like to see this implemented, and am willing to help!

93. As much as I’d like to play with fonts isn’t it quicker to design an image graphic – and it seems like you’d have more options as to how to arrange the text if designing an image. I guess it’s another arrow in the quiver for web design but when I really think about it – I’d probably just stick to making images.

94. True, some people will screw it up (I may be on that list once or twice, my page’s while never myspace-horrid, have been called “ugly” before). However, I agree that content will be just as important. One thing I have noticed though… When the content’s worth it… An ugly page will get better. Even mine improve over time, because I, and the very small number of people who frequent the page, want two things:

    Good content: Already there in most of our opinions…

    A easy and (in some cases) pleasing way to see that content:

    I have a mind that says “Don’t make a web page you won’t use yourself”. I don’t know how well that goes over for people who make a living in web design, but as a amateur designer, I think its important. If its a blog, fan site, or creativity expression (like a web comic or story writing or art gallery) site, why make it if you won’t go back to it yourself. True you’re going to be putting it together for others to see, but there are several reasons to go yourself.
    If its a fan site, it should have reference information to what its dedicated to.
    If its a blog, blogs are like journals, and few journal keepers I know NEVER go back and read.
    If its a creativity expression site, at least at the beginning you’re showing it to your friends, and is a great alternate storage place as well. Its a great way simply to access the images/stories/comics/whatever when you aren’t near the originals. Any build-on-itself creativity can benefit from the creator having a simple access to previous material when on the road, or even at the coffee shop.

    So why make a site you can’t stand to look at? However, I’m constantly by friend, acquaintance, and enemy described as having The Crazy but hey.

    It makes sense to me. I’m by far on the geek and logic side of computer and web use, but even I feel the need for the occasional aesthetic. This is a simple way.

    As for Joseph Lundeens bit:

    I don’t see how it wouldn’t be quicker. Providing images means sitting at Photoshop or The Gimp and tweaking and tweaking, then using the image in the draft page design, and if it doesn’t fit or behave when you test other resolutions… you have to go back into your image manipulator and tweak some more. As a font, simple applications of the text become no harder than when using a basic font on the “general” list. Your tweaking is restrained to your favorite text editor, and a couple web browsers for preview.

    Some applications of artistic text are different. They really have to be in places and styles related to an image, those should go in the image. However, If I can make my Header, and Headings stand out without cramming my web server full of images. I don’t want to.

    I see this as making page loading faster, and another step towards “keeping the pretty screen without molesting the printer”. If your fancy text is an image, even putting it in the CSS as a background image for a div means that TEXT isn’t there when you build a simple image less print format css, or you’re slamming people who print section of your pages with images that take lots of ink, and on a black and white or low dpi printer maybe unreadable anyway.

95. I noticed the main argument was aesthetics. This is the first thing I thought about when the idea of web fonts first found my interest. I thought about it a bit differently though. I thought about all those individuals out there with Frontpage who wanted a website and used a combination of primary colors and animated clip-art to make it happen. But instead of thinking of this as a bad thing I thought, as a designer, it would create a higher demand for good design. With all these schmoes out there using Papyrus for their body copy well designed sites would be a high commodity. I can hardly wait for web fonts. Especially for those people that pay for bandwidth on a per kilobyte basis. This would save people in the UK using their mobile phone for surfing a whole lot of money while enabling them to see your beautiful site.

96. If you increase the design tools available, you increase the number of bad designs available for people to try, yes. But you also increase the number of good designs people can create as well. And individual bad designs don’t survive, even if bad design in general does. Individual *good* designs, on the other hand, continue on. So who cares how many corporate websites could end up out there? If someone makes a bad design, do what people have done throughout history and vote with your eyes (or wallow in kitsch, if appropriate).

    In a way it doesn’t matter whether or not the web ‘needs’ more typefaces – we’re going to get them (eventually). More and more people read on the web – eventually the web will be the primary place in which contemporary postmodern society gains its information. Are we going to express the bulk of human experience through a few typefaces? Are we going to expect people to limit themselves in this one aspect of web design while widening field in other directions? And how the heck would type foundries continue to make money if print designers (who buy typefaces from time to time) are replaced by web designers (who don’t)? This is an eventually-inevitable change, no doubt of it.

    The trick is that someone has to find a way through the copyright law jungle. Most likely some forward-thinking type foundry in combination with a type-friendly software company. But someone’s got to put the legal pressure on – hopefully that’s what Apple’s up to by adding @font-family to Safari through Web Kit . . ..

97. I am not able to put music on this site I am working on. I have never done it before. I have followed all the instructions. The player shows up, but the file cannot be found? I do not know what to do and need help. Please advise.

98. I appreciate that fonts are protected by copyright law, but so are images and music, yet they’ve managed to make their way through the web to users.

    The only reason I can see why imported fonts aren’t supported is, unlike images and music, the only people who know enough to explicitly want non-standard fonts (designers) don’t represent enough of a voice to make the feature hit the browser development road map.

    That, or the font manufacturers are just that god-like powerful. :

99. Actually, there is another alternative now. You can use True Font Family to render images through 100% CSS. It works on all major browsers (IE/Firefox/Opera/Safari) and when TrueType fonts are finally available you do not need to make any adjustments to your stylesheets.

    I have taken the liberty to add True Font Family to these examples. You can check them out online over at:

    http://www.truefontfamily.com/?p=alistapart

    No modifications have been made other than adding the required JavaScript. And the imported stylesheet with the @font-face rules had to be moved to the same domain in order to allow JavaScript to read it.

100. SIFR is indeed a good way of using your favourite fonts on a web page. However, I feel that it is only a stop gap until the real problem of using fonts online is rectified. Have you ever tried copy and pasting a mixture of normal and sifr text from a page? As far as I can tell, it can’t be done.

     I think there is high probability that opening up web fonts will be abused, but that’s why people like us have a job, to ensure that it doesn’t. Personally I can’t wait for a proper solution to this problem.

101. Your suggestion to change letter spacing in @media rules is interesting, and not a feature I would oppose, but I feel it falls short of solving certain problems.

     For example, if the user has the desired font but their browser doesn’t support fonts downloading, they won’t receive the rendering even though they potentially could. Why not integrate all font properties into @font-face, such that each font-family can be given suitable modifications? This idea came to me years ago when I stumbled upon a (now non-existent) page detailing the horrors of spacing and other rules designed for Verdana when viewed on Linux systems without the font. The details should be tied to the font itself, and only separable from it at the designers discretion.

     This framework could also be extended to point to different files for italics and various weights if necessary, again each featuring their own font declarations.

     However far we might go in this direction, it believe that @font-face is the more logical location for this kind of information.

102. “¦ the occasional Mozilla Firefox/IE/Safari/Opera updates also installed a few decent free fonts like Gentium? It wouldn’t be a final solution though.

103. The name of a font is certainly not copyrightable. On the other hand the font name may be trademarked. However, the font itself is almost certainly protected by copyright as it is a series of instructions of how to create each particular glyph.

     Whenever I discover people saying or writing amazingly wrong things about intellectual property rights I am reminded of a friend of mine who believes that all of the chinese restaurants in the anglosphere could have their menus in written in correct English for the cost of an eggroll if they would run it by a fourth grader before sending it to the printer. There really is no good reason for such wrong-headedness regarding intellectual property issues in a world with Wikipedia.

104. For those that haven’t noticed yet, “Apple just released Safari 3.1”:http://docs.info.apple.com/article.html?artnum=307467 with support for @font-face embedding. This whole issue makes me think of the “open letter to Adobe, Apple, and Microsoft on Design by Fire a few years ago”:http://www.designbyfire.com/?p=30 . And really it makes me think about the future of typography, especially that which is released in the public domain. I even wonder how personal typography might become, if it might become more practical for individuals to create typefaces based on their handwriting or unique style. With OCR technology and tactile interfaces, it might become possible to handwrite text on a tablet interface, have the computer convert that to digital characters, but then render them using the “typeface” it has learned from you.

105. Copyright is completely irrelevant to this discussion. If you can use Zapfino in Photoshop to create an image for the Web brower, you can write “Zapfino” into CSS to create some text for the Web browser.

     When a type foundry sells a font to a computer user, that is for the user to use in their own publications and designs when they are authoring documents, it has nothing to do with reading documents. For example, I can pick up today’s New York Times and if it is printed in a typeface that I haven’t purchased and don’t have the right to use in my documents that is just fine … I’m reading the NY Times, not writing or publishing it. If a user’s Web browser downloads a font to show them someone else’s publication or design, that is reading, not authoring, and there has never, ever, in human history, been a precendent for the reader licensing fonts before they can read a document.

     When the Web first went mainstream, there was a bugaboo about the fact that technically, a person’s computer was making a copy of the content of a website in order for them to read it. Downloading a font that will be used to render the current Web page is the same thing.

106. @Fred: copyright on fonts is sketchy at best anyway. The US courts in particular have consistently struck down any claim of copyright in a typeface, as they consider type to be a functional work, but not sufficiently novel to patent either. In effect, they’re saying that all typefaces are derivative works of the original Greek alphabet and hence not deserving of copyright protection.

     For this reason foundries don’t actually claim copyright in the typefaces themselves. Instead they claim copyright on the .ttf file (or whatever) as a piece of software. Then, when you buy the right to use the software, they make you click “Agree” to an EULA which prohibits you from uploading the file to your website. If you want your users to see your font over the web, then you need to send them that file, and the EULA says you can’t.

     Australian copyright law doesn’t mention typefaces at all, and the FAQs from our copyright office advise us to treat it as software. I think that characterising a bunch of declarative code that executes nothing and merely describes the shape of a non-copyrightable typeface as software is a stretch, but there you go. In practice, it’s simpler to avoid getting shouted at by the old foundries and work with the new ones on more equitable terms.

107. I develop my own fonts, and would be more inclined to add OpenType features if there was more support for them from applications like Opera and OpenOffice.

     I would like to see support for OpenType Features in Opera. Firefox 3 already supports ligatures by using code like this:
     [code]

     [/code]

     OpenType is also useful for Small Capitals, OldStyle Figures, Stacking Fractions, and Super/subscripts.

108. While I was reading up on browser’s fonts resolution algorithms (not really finding much to read) wanting to improve my story on “font resolution and glyph substitution in browsers”:http://www.undermyhat.org/blog/2009/09/understanding-font-substitution-in-browsers/ I came across this post which proved an excellent read on the side of “what can be done if…”.

     10th anniversary is gone, enter the 12th anniversary: Safari and Firefox 3.5 now support font embedding through type-face. It isn’t perfect (glitching), but it’s a start. Perhaps a good time for an update? The “if”-part of the story has become reality, it seems 🙂

     What I missed or overlooked in your story: CSS 2 allows the browser to automatically locate an online source for a font (based on the font-family). However, so far I haven’t seen any browser doing that. Obviously, when it comes to legal issues, this requires the font to be freely available or part of the browser’s legacy.

     _— Abel —_

109. I’m very new to web design. Still attending CC for my certificate. I have an html doc that dreamweaver was used to create & has some inline css for the fonts chosen. Font in a red suit for 1st choice in size 36 no headings, 2nd choice is papyrus bold no headings for the title. I have a small amount of text that I only want to be in papyrus bold. I can’t seem to figure out where to place the @font-face code etc. or what exactly it should be, even after reading & re-reading every single piece of info on the web. I think I might need someone if at all possible to look at my code. I used the drag & drop features of dreamweaver to create it, because I am just not good enough at writing the html yet. I can’t use external style sheets because this is for en ebay template. eBays system is copy & paste for html. So once again my css is inline. I’ve tried dropping the font files into the font generator from fontsquirrel , but just keep getting an error with a red X in a box. Some of my text was done in photoshop because that text wont ever change so I made it part of the images. But some text will need to change on a reqular basis, & also needs to be searchable through tags in eBays system so it can’t be an image. How can I find out what the exact code should be & where to place it in the html doc? Thank you for any assistance! Stacey

110. firefox 3.5+ and safari are now supporting opentype web fonts. Yay – come on microsoft – we’re waiting!

111. I think I’m a little late in my discussion, but in case of someone read it, I would like to know which browsers support web fonts.

     Thanks!

112. I definitely agree with the new “wave” of web fonts, however I am sure this will happen in time, easy and steady, but will 100% happen.

     It’s nature, things evolve, from animals to,well yes, web fonts. 🙂

     Anyway, awesome article.

113. as a designer i would definitely love to use some ttfs but I would keep it minimal perhaps on the website tagline and maybe headers but i would stick to the web safe fonts on the content and stuff just to keep it readable for most people.

     since this article is from the person who originally proposed css then it is given that this argument is legit and comes from experience.

     fonts are truely part of the aesthetics of a website but the concern for readers and browsers that dont support the technique should be prioritized over the aesthetics. . .

     all in all, we web designers must balance these factors and try to always have a semantically structured mark up while having a browser compatible and readable website content and a beautiful website

     create websites that are important and usable and if it is important and usable dont hesitate to make it beautiful

114. as a professional, I am using EOT fonts since the “last century”.
     (www.hyphenator.com/examples/ROSETTA STONE.htm
     http://www.astrotime.org/Creando_AstroTime_IE_.htm)

     .. but today I cannot obtain this basic idea to work, both in FF.3.6.9 and IE6
     the default fonts only are layed out by the browsers.
     What’s wrong?

     ..
     @font-face { font-family: “ledboard”;
     src: url( “http://www.astrotime.org/LEDBDREV.TTF” ) format( “truetype” );}
     H2 { font-family: ledboard; font-size:30px; }
     </style>
     </HEAD><BODY>

     prova font

     ..

115. As on 19th of March 2011, I am thinking about to implement the @font-face rule in the relaunch of my website, just to learn that internet explorer 8 (tested on win xp) still does not support downloading fonts? Is there some workaround, e. g. that I use another font-format than WOFF for Internet Explorer?

116. Thanks for the insightful article, we are just starting to use them and are happy with the flexibility they offer.

117. As a primarily print-oriented graphic design student coming fresh into the field of web design, it is a relief to know that there is a simple way of having beautiful typefaces on the screen. It is quite a chore to go through the trouble of creating an image or background to have the font you want on the page. It is so much more comforting to know that the text is simply editable without having to pull out image-editing programs every time. Although the web is slowly becoming a much more visually appealing place to be because of the refined typography and better design in general, I do believe that there should be rules as to which ones are able to be used. The web is primarily used for sharing information, and so readability and other basic rules of good typography should still be the most important. The last thing anyone wants is to be flooded on the web by gross fonts that are too over the top or simply illegible. In print, it is not so much of an issue as people are already accustomed to seeing printed work as “art”; however on the web it is less practical to have such artistic pieces.
     Thank you for the great article!