Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Font Embedding Now

May 07, 2009

Currently one of the biggest stumbling blocks to embedded type on the web is of a legal nature rather than any genuine technological barrier. Most of the major browsers have now implemented the @font-face property, and between sIFR and Cufón there are also alternatives for providing non-standard typefaces to browsers that haven’t caught up yet.

So the technology that allows us to embed custom fonts is more or less here, but the licensing debate rages on. Richard Rutter and Simon Klein have written a great pair of posts summarizing the concerns some foundries have with embedding, while countless other opinions have come out in favour of both addressing and ignoring these concerns.

But this is really for the foundries and the browsers to figure out. What you or I think should happen probably isn’t going to change the outcome of the debate; only overall trends in the market have a hope of doing that. So it seems to me that if we want font embedding to take off sooner rather than later, a change in our own methods and expectations is in order. And maybe a little voting with our pocketbooks.

Designers — myself included — are hoping for a wide open playing field; that’s not going to happen yet. What we can have, however, is a larger field than the one we’ve been playing on. There are countless free fonts out there that have commercial-usage licenses which allow for embedding. Yeah, a lot of them (if not most) suck. But there are resources like FontSquirrel and the webfonts.info wiki that are collecting some of the better ones, and the list is only going to increase over time.

If I were to start using font embedding now by, say, designing sites that use only those fonts I know to allow embedding, it opens up my options and causes me to start seriously considering embedding as a legitimate tool in my toolbox. The available typefaces may be limiting, but they’re bound to be a step up from Georgia and Arial everywhere. If enough designers are doing the same, and font embedding becomes a fairly common practice on the web, the foundries may see that they’re effectively being ignored by this medium. Perhaps then we’ll start seeing some actual change.

I’m going to try it. Let’s see what happens.

(This article was set in Museo Sans, a typeface by Jos Buivenga using the Cufón library. There are clearly some problems with the latter, as noted in the comments below; I doubt I’ll be setting full pages using Cufón, probably more like just headers. However, I decided to make an exception for this article for the sake of playing with it a bit.)


1
May 07, 16h

The fact that you present the text of your article using Cúfon on FF3.5b4, thus preventing me from selecting any of your text and copy/pasting… well, worries me.

Not to mention the *410* canvas elements on the page.

When these “enhancements” start worsening the experience/usability, that’s where I draw the line.

Honestly, I’d prefer to see it set in Calibri or other sans-serif typeface…

Now, if the browser supports it, of course, I have nothing against it.

2
Cam C. says:
May 07, 16h

I think the companies will stand to make the most money if they allow embedding and maybe charge a percentage more for the fonts that have a web license; it’s better than having them outright stolen and to make nothing… your plan seems like a sensible way to encourage that business model.

3
May 07, 16h

> I’m going to try it. Let’s see what happens.

I’m with you, Dave. Viva la Revolución!

Also, Museo Sans looks pretty great set as body copy. I had not seen it used in such a way.

4
Dave S. says:
May 07, 16h

@André - I used Cufón which has known limitations at this moment in time. @font-face suffers none of what you mentioned above, however it’s not as cross-browser friendly at the moment.

So I made a choice and rendered this entire article using Cufón instead of @font-face. Would I do that on a client site? No. But I’d certainly be willing to live with those limitations for a header or three.

I’m curious though, did you actually have a reason for selecting text on this article, or were you just making a point?

And, if it renders quickly, what exactly is the problem of 410 Canvas elements?

To be honest, I was more put off by needing to include the entire jQuery library just to have a selector engine present for Cufón’s use, another limitation.

5
May 07, 16h

Has to be worth a shot. Font management and typography seems to hold some attention at the moment, so it’s a good time to push things a little.

6
May 07, 16h

This works fine on my mobile safari anyway.

7
Mike says:
May 07, 16h

Wow, whatever method you chose here sucks. Image replacement? Really? Talk about killing accessibility and functionality for the sake of a purely egotistical change.

8
May 07, 16h

Boy, Museo and Museo Sans are beautiful typefaces aren’t they?

I for one am for anything that improves type on the web. Whether that means support from the browser, or support hacked-on by other methods. I used to use sIFR3 but found it difficult and bulky. Now trying Cufon and loving it so far–but I wish it had support for line-height (in IE), selectable text, and better control of links/hovers.

There’s no perfect solution yet. We may never get one. But at least it’s improving, slowly, whether the browsers and foundries all want to jump on board or not.

9
Mike says:
May 07, 16h

My reason for selecting text: I want to.

The browser, and virtually every other application that runs on my computer, allows this functionality. Your site isn’t that special for me not to get annoyed by taking this option away from me.

I read this originally in my feed reader (which let me highlight the text, btw tvym) and only came to the site to see what the font looked like. I couldn’t stand to get past the first paragraph.

Ahhh here come the haters. Nothing gets the curmudgeons out quicker than taking away their god-given right to select your text, copy it, and paste it on something owned or operated by someone else.

[spits out the haterade]

11
May 07, 16h

Interestingly, you can highlight the text and paste elsewhere. The issue seems to be that you get no visual indicator of the fact that something is being highlighted.

12
May 07, 16h

Sounds good to me. That’s definitely a great point, that though it won’t be the widest playing field, it’ll be *wider* at least. And sites like FontSquirrel and webfonts.info are a nice help.

13
May 07, 16h

Hmmm… I never actually considered Cufon a viable solution for body text. Compared to real font rasterizers, plain old canvas outlines kind of suck: there’s no hinting, no subpixel rendering and no gamma correction. The result is a piece of text that looks blurry, uneven and hard to read. And I’m used to OS X’s renderer, which is already blurrier than most.

There’s not much we could do about the lack of hinting, and we’d need to move to solid canvases to address the other two (and it would probably be a lot slower). So even after a lot of tweaking and hacking, we end up with something that will look ‘off’ to most visitors.

At the very least, you should treat Cufón as a fallback for browsers that do support font embedding. Safari has done it since version 3, and Firefox 3.5 isn’t that far away anymore.

14
nickb says:
May 07, 16h

While I wholeheartedly support better font embedding, this article renders and scrolls extremely slowly in IE8 and as the above commenter mentioned, no copy-paste either… you may be enhancing the typography and visual appeal, but that seems to detract from usability pretty heavily. Bit of a catch-22.

-nick

15
Dan Rubin says:
May 07, 16h

Right on, Dave. As with the web standards movement, the best way for us to seriously introduce these ideas into the mainstream is to start using them in our own designs and projects.

And on the topic of Cufón and its handful of *minor* issues: this is one area where IE6/7/8 may help get the word out — as long as problems only exist in fringe browsers for now, there’s no reason not to use it, even for client projects.

16
May 07, 16h

@Dave:

I did, actually. I wanted to copy/paste the content of the article to post to a Webdesign mailing-list we have at work. I don’t like to post just the link… I paste highlights of the article with (of course) a link to the source. So yeah, it did get in the way.

I also have a stupid habit of selecting the text while reading, karaoke style.. but that’s a whim. :)

Right, the +400 elements didn’t freeze up my dual-core unibody macbook, but it’d be interesting to see a less-capable machine trying to cope with the effort. Still, I’m with you… for headings, I’d buy it. Full text, I’d prefer graceful degradation any day of the week.

Still, I admire your will to push the envelope. But I’d stick with the @font-face where it’s supported and wait for others to keep up. (on full article text, at least)

17
Michel says:
May 07, 16h

Well, I see some problems:

1) I can’t select text in the article. It’s like in the older Flash-only sites. I can live with it. A header can live with it, too. But main columns in a website, with large blocks of text? Hmm… Not so sure it’s that user-friendly.

2) Resize text in Firefox 3.0.4/WinXP: Select View -> Zoom -> Zoom text only, then try to enlarge the text (ctrl + +). Text doesn’t scale. It’s fine for a header, but not for main content, again. Not so user-friendly or accessible. On the other hand, if you do not use ‘zoom text-only’ option, then text scales fine. Or almost. It looks blurry, much blurrier than the surrounding text (which is standard).

There are probably some more minor problems, but still, I think that: This is fine as an experiment. But maybe browsers are not that mature (yet) as to make this a nice, stable, accessible and usable reality…

Just my $ 0.02:)

18
May 07, 16h

I’m in Safari 4 beta on mac and it works just fine. Selecting the words is weird, not like on the @font-face sample you link to, which works wonderfully except for the wacky font-rendering… (another war).

So, I’m up in the air on the issue.
I want both.

However, if @font-face becomes a commonplace solution, I personally would prefer that there be an agreed upon way of toggling the designification. Undoubtedly, a weary-eyed junior designer may utilize Sand or Gil Sans Ultra Bold Extra Condensed Small Caps with unrecognizable ligatures perhaps even in a extreme negatively letter-spaced: way. In cases like this, and i think we can agree that there’s no doubt it will happen… somewhere, an easy-on-the-eyes option needs to be in place… for everyone.

Getting foundries, designers and browser manufacturers to see eye-to-eye may well be a 100-years war. EULAs are EULAs, and I want to respect them.

Great article, and yes, it looks great here! Nice!

19
Dave S. says:
May 07, 16h

@Michel - regarding 1, as covered in previous comments, the text is selectable but you don’t get a visible indication that it has been selected. This is a problem with Cufón at this moment in time.

Regarding 2, try coming to the page with already-resized text. The larger text size is respected, it just doesn’t respond dynamically. sIFR used to have this same problem too.

Again, if I’d used @font-face instead of Cufón none of these would be an issue.

20
Dave S. says:
May 07, 17h

@Luke Dorny - that’s what user style sheets are for, naturally. I’d probably be more inclined just to turn off CSS completely if faced with the negative letter-spaced Sand scenario.

It’s a fairly valid point though; normal users don’t have the ability to override legibility trainwrecks inflicted by inexperienced designers.

(Though, same was true for colour selection back in the 90’s, and the web seems to have self-corrected; I’d expect a similar cycle for fonts)

21
Rick O says:
May 07, 17h

In re my initial Twitter response … I think that the solution is simple: some sort of “Revert Text” option that undoes the rendering so that the text becomes selectable and obeys font sizing. You get the best of both worlds – your initial presentation is preserved, and it’s up to the individual to break it.

22
May 07, 17h

It seems like a number of commenters are missing the forest for the trees. The point (as I understand it) of having the article rendered as cufon is not that cufon is the future of font embedding. Far from it. The point is to demonstrate what an article could look like if rendered with a font that is unlikely to be installed on the user’s machine. A glimpse into the future if you will. Instead, you’re complaining that the crystal ball isn’t letting you select the text.

We want font embedding and it’s almost here. As Microsoft begins its journey into IE9, I think pressure needs to be made NOW to come up with a solution.

23
Dave S. says:
May 07, 17h

@Jonathan Snook - thanks, you just explained my thinking better than I have so far.

24
John Foliot says:
May 07, 17h

Hi Dave,

As a ‘creative’ who gets paid for your artistic work, I am surprised that you have less of a ‘moral stance’ regarding the use of @font-face today. Oh sure, you recommended using licensed and ‘free’ fonts, but sadly the technology (designed by engineers with no consideration to artists) sees no difference between those and licensed art, and is a blatant offer to steal.

If I were to suggest that the best way to improve the artistic look of a website was to outright steal not only your design ideas, but your actual graphic creations, would you still feel that all was OK with this notion?

In actual fact, I think that creatives should stand shoulder-to-shoulder with other creatives and *REFUSE* to use @font-face until such time as an equitable solution can emerge that protects the font-foundries today - most of which are not huge mega-conglomerates ensconced in shiny towers, but rather small design shops that are simply trying to pay their bills, just like you. The alternative is to simply drive those poor artists out of business - stifling the creative drive that allows new type-faces to emerge, for the betterment of all designers.

25
Dylan says:
May 07, 17h

It’s always refreshing to see a non-standard typeface on the web. I’m looking forward to when I don’t notice it.

26
Dave S. says:
May 07, 17h

@John Foliot - Invitation to steal? Stifling creatives? Over the top rhetoric. You’re not exactly winning me over here.

Since you’re attempting to relate this by making it personal, let me give you a real life personal example. People buy the icons I sell on this very site and include them in their app/site/whatever. They could choose to do so as unmodified PNG files; that would make them ripe for the picking by others who haven’t paid. I can and do ask them to take steps to prevent this, by saving them as dithered GIFs or whatever, but I have no more control than that. I sleep well enough at night, and people keep buying them. Works for me.

Part of the reason I used Cufón here, and have subsequently taken slack for all the accessibility implications caused by that choice in the comments above, is because I’m uncomfortable throwing an unprotected TTF/OTF file on my server for precisely those reasons.

If you’ve read the article by Richard Rutter I linked, you’ll see it proposes some possible solutions for the fundamental standoff between typographer’s rights to protection and the web’s need for openness. People are thinking about this from both angles. Both sides have to give though; the foundries need to let go of some control, and the browsers need to provide a way of allowing more control. I don’t think @font-face is the best choice for that, nor do I think Microsoft’s proprietary EOT format is, either.

We just don’t have that halfway point. Right now we have nothing. The foundries and the browsers need to work together and figure out how to allow this. That’s what I’m in favour of.

27
May 07, 18h

I love what you’re preaching here, Dave. Focusing on fonts that allow embedding won’t suddenly cause us to enter a new age where typography falls from the skies like mana, but if widely enough adopted as a practice it’ll make a signal that foundries need to start coming to the table with a more open attitude towards allowing some method of embedding or face a loss of profits.

I would love it if Cufon was spruced up to fix the text sizing and selection issues, as it seems like a really great tool for fast, rich cross-browser font support. (And hey, it works for non-Flash browsers!)

28
Cam C. says:
May 07, 18h

The foundries that will go out of business first are the ones that refuse to recognise what a huge chunk of the creative industry is asking for – a way to put more fonts on the web. I think it’s pretty easy to draw a parallel to what’s happening with record companies and movie downloading to see that when the industry refuses to respond to customer demand they see their sales drop off… I don’t think DRM solves anything, as the people likely to use something illegally will just find a way around it anyway; it just prolongs an unsound business model a little longer.

As a designer who pretty much only does web sites (excepting the odd business card etc for some of my web clients), I buy a hundred or couple hundred dollars worth of fonts every year; if I can put that toward companies that support web fonts, I gladly will, because they’re offering a solution to a problem I’m facing now, ie. clients wanting something that looks professional and unique.

29
May 07, 18h

This is what web design community needs, more people with guts that start using new tools and less people that complain about the web lack of fonts and do nothing about it. Congratulate to you, Dave, you had have me see the future through your cristall ball, using Snook´s words :)

30
Neal G says:
May 07, 18h

Hmm try disabling CSS (using FF web dev toolbar) It seems that each word is repeated twice. I believe one instance is the canvas element and the other is plain text. Just something I randomly noticed.

Dave I know you just trying to make a point with this post much like Eric Meyer did with his “in need of a layout system” post. It’s good to have discussions about this.

31
Matt D says:
May 07, 18h

@John Froliot

I think by using @font-face it`s an invitation for designers to get creative.

Not only that, like with ALL industries technology changes and one will just have to adapt. You are suggest that technology be trifled just so designers can pay their bills and make an income, right? No, heck no..then there would be no innovation. You mention being ‘creative’? Why can’t the designers of type faces just get creative in marketing their typefaces adequately? Just adapt already. I am not going to pay $500 for a font, but for $50..I definitely would. Lower your prices and increase demand, you will make the same, if not more than you would right now. I know what you’re thinking, but please don’t give me that ‘quality costs’ crap either. With the CSS standards IMPROVING, someone should really take advantage of the potential font market.

32
May 07, 18h

@John Foliot: I appreciate your desire to stand up for the font foundries.

As a developer and designer on the web since ‘95, it’s hard to think that anything relating to the web wouldn’t be implemented using an open and accessible format. Any closed format has ultimately moved towards an open format. Of course, HTML, JavaScript and CSS are wide open for the taking. So is image embedding. Flash has been getting pressure from the SVG and Canvas camps. Video, previously requiring custom installers and protected streams, have been moving to a vendor-independent embedding using open-source formats.

Why would font embedding not follow the same course? As a moral stance, I think Dave has the right idea: support those who are willing to enable their fonts to be embedded. And if they are commercial fonts, let’s show them that we are willing to pay for them.

Throwing up barriers will only serve to frustrate everybody and still doesn’t help foundries one bit. Why would I pay for a font when I can’t use it in the one place that I design for: the web.

33
Marcus says:
May 07, 18h

So you can’t make money on your product because you can’t control its distribution. Ugh. How many industries have to have this conversation. So the music industry falters (read doesn’t make as much money as they used to, don’t be fooled) and Apple rakes it in with Itunes.

Get it together! Its called a subscription based font repository. Or something!

This is how it has to go. Either change your business model, work with the industry you supply to create a workable technical model for distibution and usage of font-faces for the web or simply fade into some massive regulatory and legal position like the music industry has been pursuing. (and you see how successful they have been lately) Because its already here. And its going to happen.

Here is the truth of the matter. If you don’t change, the world will change around you. Welcome to the 21st century everyone.

34
May 07, 19h

Technical issues, finances and accessibility aside, this is like water for my very thirsty eyes… ahhhh!

35
May 07, 19h

Thanks for taking this first step Dave. It seems that designers and developers have been hesitant to implement font embedding.

A few months ago I wrote (http://bradt.ca/archives/font-linking-type-foundries-and-drm/) about this situation and its strikingly similarity to the music industry and MP3 fiasco. The foundries will either take an early proactive approach or (like the music industry) a late reactive approach. For developers and designers though, it doesn’t really matter. Font embedding is here and developers are free to take full advantage without waiting for the foundries.

36
Nathan says:
May 07, 20h

Beautiful. I can’t believe people are short sighted enough to complain about the text selection, when this is obviously just an example of what the web might look like in ten years.

About using font faces on the web: if it can be displayed on a webpage, it has to be publicly accessible. It’s an impossible task to try to make something that is both viewable by the internet public, but yet somehow protected from them from it at the same time.

Adding drm is not the answer and would slow adoption. It’s a fact of life, if it wants to live online, if it can be displayed on my screen, then it needs to be accessible from my computer.

37
May 07, 20h

@Font-face should be set up in browsers so that the font can be displayed on the website it’s embedded in, but it’s not permanently saved on the user’s computer. If that’s the case, then how is using a licensed font on a website any different than using that font on print design?

Foundries could add new license provisions for people using them for web embedding if they wish.

@Font-face is in no way a bad thing for typographers. In fact, it opens up more doors for revenue generation. Companies need to embrace industry change, or they fall by the wayside.

Sure, some people might use their unlicensed system fonts to embed, but how is that any different than them using those fonts to create type on a graphic, and putting the graphic on the web?

Heck, there could even be a new font format that’s specifically for web embedding, which prevents use as a system font. It’s up to the font developers.

38
John Foliot says:
May 07, 20h

Dave, Jonathan,

The fact that you and others are willing to do the honorable thing is not the issue. I believe that many will in fact do so. The problem is that once you use a font-face that *you* paid license for, others are free to grab it and use it for whatever reason and the creator has no compensation. I’ve been hanging around on the web for a while too guys, and played with EOT (and Bitstream, for Netscape) way back when in the v4 browsers, so I understand (or at least appreciate) in many ways the issues.

Dave, I read Tal Lemming’s article a few days back, and have passed that URL on to my circle already. He makes some great and I believe workable points, and he too freely admits that if somebody really wants to steal a font they will, but let’s not make it too easy shall we? To date, I do not believe that Richard’s ideas (which are suspect to me anyway) have even been considered - in many ways the horse has already left the stable.

For example, he boldly states: “Font foundries could license their fonts for embedding and serve those fonts only to registered websites, using their own hosted system or via a trusted third party.” Uhm sorta wrong. Any script kiddy worth his salt (and exactly the target audience for theft) will simply look at the CSS file, find the @font-face declaration (complete with relative or absolute URL), grab that path, insert into address bar and presto - download the file. IT REALLY IS THAT EASY, and as a test a while back a bunch of my colleagues and I did just that, using a licensed font. Sure enough, I could grab it in an blink and start using it in any program I chose - one truism that Mark Pilgrim noted (in his highly offensive blog posting).

I get that DRM is a sticky issue (those that know me also know I left the record industry a decade ago after spending 20 years in that business, so I have a keen awareness there too), but until the browsers afford some semblance of artistic protection to the font foundries there is a real problem.

The browser manufacturers want developers to use this new feature (@font-face was first proposed by Håkon Wium Lie [CTO of Opera]), but the artistic community needs to insist that the browser developers do something to at least acknowledge the commercial value of the art in question, and the right of the artist to be compensated.

Dave, you said yourself: “I don’t think @font-face is the best choice for that, nor do I think Microsoft’s proprietary EOT format is, either. We just don’t have that halfway point. Right now we have nothing. The foundries and the browsers need to work together and figure out how to allow this. That’s what I’m in favour of.” *THAT’s* why I am suggesting that the artist not use @font-face today - it’s a voting with your feet issue, and if the majority of artists *DO* use @font-face, the the browser engineers will point and say “see, it’s OK, we don’t need to do anything more” (or something less eloquent).

Peace!

JF

39
John Foliot says:
May 07, 20h

“(or something less eloquent).” Missed the following:
http://diveintomark.org/archives/2009/04/21/fuck-the-foundries

40
jason says:
May 07, 21h

I think the point is that the web has come along way in it’s relatively short existence and continues to improve on so many levels that make it more usable, more accessible, and more visually appealing. In many ways it surpasses our print counterparts, but in the typography area we’re light years behind.

We recognize and respect the copyright issues, we just want to advance the dialog and the search for a solution. This is an issue that requires participation from all parties.

41
May 07, 21h

Nice discussion, I have one question about Cufón. Why when I disable CSS canvas elements show up and duplicate every word is text? This can be a serious problem with Screen Readers or other devices.

42
May 08, 00h

This page runs like crap on my iPhone. Never use cufon for body text, ever.

43
May 08, 00h

I think people keep missing the point of having a limited font set. If you bring font embedding to the web it’s going to be like the September that never ends… all over again.

44
Michel says:
May 08, 00h

@John Foliot:
// #c044911

To *refuse* to use @font-face?? An equitable solution can emerge that protects the font-foundries today?

What do you mean by ‘a solution that will protect the font-foundries’? Sort of a special digital copyright-protection mechanism, such as is used to protect copyrighted DVDs with movies, games, etc.? Well, that simply won’t happen. You can copy all sorts of protected DVDs, and you can also copy software, which is often protected in a much more complicated and expensive way (activation, registration, etc.). Also, as a rule of thumb, /the more is protected a certain piece of software, the more it is copied everywhere/! :)

So, to blame @font-face to be the killer machine of today’s font-foundries? I wouldn’t do so… (Plus, fonts can be easily copied by 100 other ways, you don’t need a designer to use @font-face in a specific website, to be able to find that font, if you would like to).

I respect copyright, but I am not sure that we need another kind of ‘activate-this/digitally-lock-that’ kind of protection for fonts… This will rather make the Web harder to use, not easier… (Just like activation mechanisms did not improve Adobe software, just made it more expensive.)

Just my two cents here…

@Dave S.:
// #c044906

On a more personal note, I’d be happy to see more fonts on the Web – but implemented in a quite standard, usable & accessible way.

I tested 1) and yes, I can actually mark a part of the article, copy it and then paste it elsewhere. I just don’t see the marked part highlighted in any way… Maybe you should post a second part to your post, with another font, which will better illustrate your point? ;-)

As for 2), I have tested it, too, and indeed, the way you suggested me to try it, it works. And that’s nice! :) Still, would be much better, if the browser would allow me right away to change the size of the text…

I am not sure that the technology is yet that mature to be ready to be pushed to the main content of the websites we make today. It’s close, though, and I appreciate that you took the extra step to show it to us and raise the discussion! :-)

@Jonathan Snook:
// #c044909

I see the trees *and* the forest. At least, I hope so! ;-) I just saw (at first glance) that there are still some problems with font embedding /now/, even if you come with quite a modern browser to the page which uses it. And would be nice to fix these problems, before we make the jump to using @font-face just like we use font-family… :)

45
Jakob S says:
May 08, 01h

@John Foliot, how does the @font-face declaration differ from the img-tag, which has been in HTML for basically forever? Photographers and graphics artists are still making a living, I believe.

I guess I am just too dense to understand why typefaces should be given special “protection” simply because they’re late to the party.

46
May 08, 01h

@snook:

Right. I did miss the point… I thought the point was to give font-face to those who support it and for others use Cúfon or sIFR or whatever.

From that point-of-view, indeed, it was a delight reading the article with a non-common typeface.

@Pedro Couto e Santos: (hi there)
Let’s see how people end up using this. But I think it’s an absolutely necessary step in the evolution of webdesign. If people take it too far, that’s their own problem, isn’t it? Why should we sacrifice a whole industry of professionals just because some will go over the top?

47
CB says:
May 08, 01h

@Phil Ricketts - the page looks fine on my iPhone (3G, v2.2.1) - exactly the same as it does in my browser. Exactly.

48
Michel says:
May 08, 01h

OK, that’s really strange:

Firefox 3.0.4/WinXP: If I disable CSS styles, I see every word in the article repeated. But it’s not only that. I thought that if I disable images in the browser, the “repeating words problem” will disappear (because I think what I see is images). But this didn’t fix the problem, for some strange reason. Maybe because images are generated by Firefox locally…

In any way, for me it looks like the technology is not quite there yet… Close, but not there. But it’s always interesting to experiment! :)

49
May 08, 01h

——-
Quoted from John Foliot:
Any script kiddy worth his salt (and exactly the target audience for theft) will simply … download the file.
——-

You’re focusing on the wrong people - the “target audience for theft” is not your target audience for sales.

You will not sell a script kiddie a $500 font or a $5 font.

But designers will spend money on a font, and web designers are a huge population of unsatisfied potential customers who want to buy fonts but can’t.

Creating obstacles for script kiddies doesn’t have much impact on your revenue, but it does burn goodwill with actual customers, and it prevents potential customers from paying you money.

Goodwill, honesty, and openness will only go so far as business strategies. But if you’re supplying a desired product for a competitive price, professionals will be more than happy to compensate you for it. It’s not that we don’t want to support other creative professionals, rather, font vendors aren’t letting us get close for fear we’ll bring some script kiddies with us.

And let’s face it. Any script kiddie worth his salt can find a torrent with a thousand premium fonts in less time than it took me to write this comment.

50
May 08, 01h

JavaScript will continue to act as a stepping stone between ‘initial idea’ and ‘final solution’ - both with this issue and others.

By many that is seen as a ‘negative’, whereas I feel it’s great to see developers trying to push the boat and be inventive when faced with obstacles.

OK, these solutions aren’t ‘ideal’, but then neither is the web as a whole. Shall we pull the web until the perfect solution is created? No. Exactly :P

BTW, I use facelift on the headings on my blog - anyone else use it and have an opinion on it over cufon etc.?

51
May 08, 01h

I meant to say this but forgot:

Font vendor revenue from script kiddies is zero. Potential revenue from script kiddies is zero.

Revenue from web designers is zero. Potential revenue is much, much, MUCH higher. Untapped.

52
May 08, 02h

I can’t wait to get font’s usable on the web. This article shows how beautiful pages could be.

As has been pointed out, there’s no point in me, right now, caring one iota about the work of font foundries, because even if I love their work and buy it - I can’t use it on the web.

It’s like being a car dealership and refusing to allow the car you designed and built to be driven on the roads, even by the people that bought it, in case someone steals it. Rendering the whole thing pointless.

The foundries need to step up and change. Otherwise they’ll just get side-lined on the web as people with talent publish somewhere else for an open audience ready and waiting with cash.

53
John from 1993 says:
May 08, 02h

Hi Dave,

As a ‘creative’ who gets paid for your artistic work, I am surprised that you have less of a ‘moral stance’ regarding the use of IMG today. Oh sure, you recommended using licensed and ‘free’ images, but sadly the technology (designed by engineers with no consideration to artists) sees no difference between those and licensed art, and is a blatant offer to steal.

If I were to suggest that the best way to improve the artistic look of a website was to outright steal not only your design ideas, but your actual graphic creations, would you still feel that all was OK with this notion?

In actual fact, I think that creatives should stand shoulder-to-shoulder with other creatives and *REFUSE* to use IMG until such time as an equitable solution can emerge that protects the stock photography and clip art houses today - most of which are not huge mega-conglomerates ensconced in shiny towers, but rather small design shops that are simply trying to pay their bills, just like you. The alternative is to simply drive those poor artists out of business - stifling the creative drive that allows new images to emerge, for the betterment of all designers.

54
May 08, 04h

@André (hello there),

That’s beside the point. Why do designers want all the fonts in the world? To make a better page or to parade their ego?

Delivery of content in a tight, beautiful form should be made for the consummer (the reader), not for showing how cool you are.

I don’t think Museo Sans is particulary more readable than Arial, so, what purpose does it serve in this arcticle other than ‘showing off’?

Not that it doesn’t look good, it does. But so would Arial.

It’s just a point of view, it does not invalidate the need to push forward the boundaries of web tech. It doesn’t mean I don’t like fonts (I love them!), it’s all just a matter of principle.

55
Rob says:
May 08, 05h

From my limited experience with Cufon, the “double text” is the intersection of the original text and the Canvas elements used to render the text in the new font. cufon inserts CSS to hide the original text. Everything else is live in the DOM, so without CSS you’ll see all elements (both the Canvas elements and the original text.)

Canvas, for those of you unfamiliar with it, is the bee’s knees.

https://developer.mozilla.org/en/HTML/Canvas

56
May 08, 07h

It will be interesting to see what will happen with the @font-face property - why would the font foundries and designers want to give their work away to the masses for free? Look at the state of the music and film industry - piracy is rife. I can’t help but think the whole licensing approach needs turning on it’s head. The solution will eventually come, just what will it be?

57
May 08, 07h

This is a total aside, Dave, but you mentioned loading all of jQuery for the selector engine in one of your comments. John Resig has spun the selector engine off into a stand-alone unit which you can get at http://sizzlejs.com/.

58
Jonathan says:
May 08, 07h

You had me @font-face :-)

But seriously, it is nice to see some people take the first step.

59
May 08, 08h

Hi, Pedro,

I’m not sure I buy your assertion that a designer uses “special” fonts just to show off.

Type is part of design and aids in the way text conveys meaning. Not all fonts have the same rhetorical value, and so the text might call for something something more appropriate than Arial (or Georgia or whatever).

At this point it’s still wise not to rely on @font-face & tools like sifr or cufón for body text; the old standbys will probably have to do. But you can do amazing things with those old standbys, as Jim Coudal and many others have demonstrated.

And to make sure I’m clear: I don’t think Dave is showing off here, just pushing the envelope. Which should be commended, since without this kind of advocacy, we might not get the tools we need to really use the best font for the job at hand.

60
Snowflake Seven says:
May 08, 09h

@Dave:

To answer your question about text-selection, I select every piece of text I read online that is longer than 2-lines or so. I’m a sighted user, but a lazy reader, so I use Mac OS X text-to-speech. The computer reads the web to me and I follow along. I know its an uncommon user behavior and not the end of the world to read your one article.

I get your point and definitely a agree that demonstrating an appetite for font embedding is a great way to motivate a resolution to this decade-old stand-off between foundry EULAs and browser tech.

61
Dave S. says:
May 08, 10h

Lots of fun activity over night. I’m going to cherry-pick a few of the replies above and respond:

@Jonathan Snook and @Nathan both make very good points above about web technology needing to be open, and the contradiction of trying to protect it at the same time.

@Infernocloud - such a format exists, and has for over a decade. It’s Microsoft’s proprietary EOT format, and it’s the precise reason why Microsoft isn’t on board with @font-face like every other browser out there. They believe they’re sticking up for the distribution rights of type designers. They’ve even submitted EOT to the W3C: http://www.w3.org/Submission/2008/SUBM-EOT-20080305/

@John Foliot - While I agree that some token form of protection isn’t a bad thing, I also agree with the above response from Harlan Lewis. You’re focusing on the wrong crowd; professional designers spend thousands of dollars on Adobe software that isn’t exactly hard to find for free elsewhere.

@Juarez P. A. Filho and @Michel - your points are well taken, but again, they’re simply limitations and glitches with Cufón. It doesn’t work nearly as elegantly as @font-face will. I might be willing to live with the problems for now, for the sake of some nicer headers, but reiterating the clarification in the original article, I doubt I’ll use Cufón for body copy because of these problems. (And screen readers will not read the canvas elements. Try it.)

@Pedro Couto e Santos - Come on. Using typefaces other than Arial = designer ego? Lets follow that line of reasoning to its logical conclusion, shall we; line-height is a result of desginer ego, pleasing colour schemes are a result of designer ego, well-crafted white space is a result of designer ego. Lets take them all away and go back to 1994. Hello, useit.com.

I noticed you’re using drop shadows on your site. Show off.

62
Paralyzah says:
May 08, 10h

I use Sifr on one of my personal websites where design has to be perfect match with rest of the website and I only use it for h1 tags. I am bit paranoid when it comes to search engines and non web fonts.

63
May 08, 12h

Oh, I noticed that the font looked great, as I started reading. Halfway through, I randomly dragged the mouse, and saw the tell-tale block-select with the overlapping edges.
It looks good!

I really hate it when a product works fine, except for one little accessibility issue that everyone misinterprets, and suddenly everyone hates it. Firefox is the only browser that can’t see the selection, but it’s suffering tremendously because of that. Because some text isn’t highlighted.

In chrome, it takes just a bit more CPU to select, and IE8 takes up all of a core just looking at it.
Other than that, though, it’s pretty fine. It would need to overcome resizing issues, of course.

I guess web fonts are the current “in” topic.
Here’s a question: Have you ever made your own font? I’m wondering if making one’s own font would make it more personal, and thus less likely to be stolen.
I really can’t imagine actually using the Coca Cola font anywhere, for example.

64
Hamranhansenhansen says:
May 08, 13h

I always use my full collection of typefaces when I’m designing and will continue to do so. That is a creative decision that has nothing to do with the state of technology or licensing disputes. The whole reason to license a typeface is to add it like an arrow to your quiver, ready to use in any design challenge that comes up.

You solve the HTML 4 font linking disaster by including generic substitutes, not by designing with those generic substitutes. If you designed using only those generic substitutes, you sabotaged your last decade of design work only because HTML 4 font linking failed.

When having a conversation about font licensing, it’s important to remember that we already had this conversation in 1998-99 before HTML 4, and HTML 4 does indeed have font embedding. The font embedding in HTML 5 is not new; it’s just improved to the point where it’s now practical to use.

It’s also important to remember that Flash has had font embedding since Flash 2 in 1997, and that PDF has had font embedding for about that length of time also. And that digital print tools have font embedding and they’re even embedded in printers also.

The fact that HTML is only now getting a practical working system for font embedding is not the start of a new round of licensing talks. It is our opportunity to quietly (as if with our tails between our legs) replace all the font-photos that litter the Web with actual text headings set in that particular font, as they should have been made in the first place. It’s an opportunity to replace the generic blandness of Web type with pages that express themselves at like a 1985 print level at least. We should all be ashamed of the past lost decade of typography, especially the foundries. Since HTML 4 font embedding failed we have seen the CD and DVD replaced with MP4 … I have no sympathy for foundries who have not yet recognized that the Web is humanity’s primary publishing medium. Their fonts exist to be on the Web first and foremost … Flash and PDF and print are accessories to the Web. If you publish in paper, it now costs more than 50% of your budget just to buy the paper. That is not sustainable and not practical and that is why newspapers are disappearing. So if there is to be such a thing as “Century Schoolbook” going forward, we’d better get to using it on the Web.

The part of the font licensing debate that really bothers me is the idea that in order to publish a designer’s catalog of work on the Web you are supposed to re-acquire all of the fonts that were used? That all of our work is in hock to the font foundries because we paid them for their fonts in the past? Because I paid for and used Helvetica instead of a free “Swiss”, I have to do an audit and pay the people that I paid for Helvetica all over again? That is patently absurd, and good luck selling that to a world that has come to think that whatever chunky letterforms Microsoft can generate are just fine.

So use fonts. Use all your fonts. The current state of the Web is embarrassing compared to other mediums.

65
Daniel says:
May 08, 15h

I’m assuming all those those commentators who are “standing up” for the foundries have never ever purchased an image from a stock photo site like iStock photo?
A short while ago you had to buy incredibly expensive cd’s to get quality stock photos but they have all since disappeared due to these types sites offering a quality product for a much more affordable price.
If you have used one of these sites haven’t you ripped the photographers off in the same way you purpose is going to happen to the foundries?

Because of these sites the graphics/images/photos/illustrations on most sites, print material etc. has been enriched as has the user experience. Not to mention many photographers make a very nice living off of these sites as their work is exposed to millions of designers not just the handful that can afford to buy the cd.

The same is true for the music, film and news industries. They are all finally doing something about it. There is a reason that iTunes sells the most music and soon the most movies too.

Yes something more needs to be done to protect the foundries typefaces which is exactly what Dave says, but lets make that happen soon.

Foundries use the web to sell their products isn’t about time to start allowing the web showcase those beautiful products?

66
May 09, 11h

I wanted to zoom in this site, but your article font looks horrible with zooming. :(

67
dusoft says:
May 09, 17h

Dave, the whole article is unreadable - the text is so much antialiased, I am unable to read it clearly. Not talking about no option to select it etc. This harms basic usability, which is strange and I wouldn’t expect this from a leading designer.

PS: On Ubuntu Linux, latest FF.

68
May 09, 18h

Though the point has already been made here, I’ll summarize it:

@font-face is by no means different from the img tag we’ve been using all those years. The img tag hasn’t thrown photographers into deep poverty and stifled photo-graphical creativity. The current @font-face implementation won’t do any harm to the font foundries too, much to the contrary, as the img tag and the stock photography market it has spanned clearly demonstrate.

@Dave S. - Though I’m too very much concerned about the accessibility issues that arise from your use (or abuse) of Cúfon I do admire your initiative and think I’ll be using it (Cufón, or some other alternative) in some headings and such from now on.

69
May 09, 23h

Dave, thanks for your linking to my article. Since writing it I’m most glad to see Cufón make its appearance.

Although Cufón and its implementation is far front perfect—as illustrated by the many concerns raised within the comments—it should be considered a talking point to ignite discussion amongst those who set type on the web. As the eventual users of any technical outcome to this debate and also one of the largest posible untapped consumers of fonts we should hold a larger sway in this discussion and more of us should pay attention to it.

Thus I wanted to pass along kudos for your article above and its use for setting the body copy with Cufón because it has evidently started a discussion and teasingly illustrates a glimpse of what good type could be on the web.

70
Lorenzo Gatti says:
May 11, 00h

I cannot select text in your image-based “article”; this font embedding technology is as useful as a HTML blinking marquee and even more irritating.

71
Rémy says:
May 11, 02h

I really like the combination Kilian Valkhof put together here http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/ where cufon is used as a fallback for @font-face, the latter itself a fallback in case the user doesn’t have the font installed.

72
abu says:
May 11, 07h

@Thiago Cavalcanti:
Yeah the img tag point has been made but the analogy has so many flaws that’s quite useless.

Photos and imagery are always been reproducible and reusable, since… well, the invention of photography.
It’s pretty much implied that whenever you give permission to reproduce a photo of yours in any work, that reproduction is in the wild, and can easily be reused by unscrupolous users.

Font faces are a tool for setting text, and as such they’re never been reusable from the work they’re used in. They can be recreated from that but it’s unpratical even in the digital age.

For that, the internet availability of imagery has never been such a shattering new issue, also considering that in most of its web incarnations, as linked in img tags, a photo is much less reusable than in its printed form - I mean, would you use a 400x300 heavily compressed jpeg in client work?
While with @font-face, the regularly licensed copy of the content producer would be available in its pristine form, fit to be used for any work by the unscrupolous grabber.


All this, without considering the very different nature of the product and market.
Photos are one-shots (erm…), producing them requires of course talent, craft and often much time and money, but in the end it’s by definition a fraction-of- a-second work.

A talented photographer can produce tons of imagery to put for sale, and the market has an never ending huge demand for new imagery.

Besides that, the actual selling of stock photos is just one way among many for a photographer to generate income. He can be contracted for sets, make exhibithions, publish books etc etc ect.


Font faces requires a whole lot of time to be crafted, and any single copy bought by a content producer is used for a huge lot of work. Font authors have basically no other mean for a living than the selling of their fonts, and the market is by orders of magnitude smaller than the photo market…

There’s always demand for new fonts, but it’s safe to say that an average content producer could buy and use a couple of hundred fonts in his career, while he could use a couple of hundred photos in one month of work…


I mean I know there’s bittorrent and all the stuff, but as a font author wouldn’t you be scared that the mechanism for providing custom fonts for website would imply to offer an unprotected copy of that font on any website that displays it?
It would be like Adobe accepting plainly that to display flash content on a site you’d have to host and link an unprotected copy of Flash CS4 on your site…

It’s a technical issue that absolutely need to be worked out for the advance of web publishing, but saying “wtf isn’t it just like img href?” it’s just naive and worthless.


73
Steve K says:
May 11, 07h

Though certainly not great in terms of functionality (selecting the text etc.) I think Museo Sans is great for improving readability of the text and far from an ego trip as some have ventured. Unfortunately for body text at this time I think Cufon’s benefits do not outweight its faults.

74
May 11, 11h

I’ve used all the various technologies over the last year or so, and none of them has done the job properly. I used a PHP image rendering engine, which worked, but lacked the nice anti-aliasing / sub-pixel rendering available for native fonts. I tried sIFR, but I find it a bit painful to generate the proper fonts for it, especially since it requires TTF and pretty much everything I had access to was OTF. Plus (at least for me) it rendered briefly in one font, then switched to another font, which caused an ugly visual glitch.

@font-face actually worked quite well, but at the time it periodically crashed Safari, so I ended up ditching it. Totally agree though that the issues are legal at this point. It would be nice for some font creators to add licenses to their fonts that would allow them to be used on the internet for free.

75
May 12, 04h

@Erik Vorhes, @Dave S., if you read Dowding, Tschichold and Bringhurst, you’ll find references to what I mean: the use of typography for advancement of the ego.

Using pretty fonts to have people say ‘oh look at the pretty fonts’ rather than using fonts to serve the text is what I’m referring to.

But I’m being theoretical not literal and I certainly don’t think this particular article is an example for such usage of type.

I thought that, since the text discusses the widespread of font variety on the web, I could add my 2 cents about what could go wrong with it.

I see typography as a conservative art form and I believe people are already butchering type on the web enough as it is (ridiculously small text, hugely long measures, horrible word-spacing due to idiotic use of justification where it doesn’t belong).

Having said that, I’m all for the advancement of web typography and I welcome new thought and solutions.

PS: my site is a blog with grossly exaggerated graphics, so yes, it’s a bit of a silly show off. :-)

76
May 16, 05h

I’m actually AGAINST font embedding!!!

The actual font family choosing constrain allow us (the readers) to get used to a small set of fonts (lucida, helvetica-arial, georgia, verdana) and read quickly any text on any web page.

If people gets the freedom to use any font… well…you know.. in no time we will all be reading comic sans.. or even worst “dafont” fonts.

You will remember this when your eyes hurts.

If font embedding where only available for h1 & h2.. well.. I could agree with that. But for p. No thanks. This could be really worst than the “skip intro” fiasco.

77
May 17, 00h

I have a habit of selecting text while I am reading. And this really freaked me out :)

The same reason why I hate reading NY Times. Double-clicking something in the text opens up a dictionary.

78
May 25, 05h

I would only ever use sifr on small sections of text, for example h1’s.

79
px42 says:
June 01, 06h

“I’m curious though, did you actually have a reason for selecting text on this article, or were you just making a point?”

mm like posting about it somewhere, like quoting it and spreading your ideas, like adding it as description in the bookmarks, oh well who cares being rude with your users is always more fun isn’t?

80
Lewis says:
June 01, 06h

For the record, I also wanted to highlight the text. The contrast between the text and the background hurts my eyes when reading articles, so I tend to highlight it to (a) be able to look away and easily know where I’ve got up to, and (b) it reduces the contrast and makes it easier on my eyes. So there are genuine reasons for highlighting text, other than because “I want to”.

81
Sam says:
June 25, 06h

There are most certainly downsides to SIFR, like highlighting text. However, it’s a case of whether you sacrifice usability for aesthetics? If you do use SIFR, I believe it should only be on small section of text for now. Your site is one of the first I have seen that has used it on all the text throughout your entire site, I hope that this doesn’t cause too many problems for your users.

82
Stuart says:
June 27, 16h

I’ve used sIFR for a while now and its got it drawbacks, but I think that when someone sorts out a cloud solution whereby you link to a font on a remote server, and pay a small fee to do so… life will be better for all. Fonts will the become a cost of the job and passed on to the client.

We’ve just got to wait for the industry to standardise the borwser technology and for older browsers to finally curl up their toes and die!

Good article - CUFON - I kind of like it, and its real fast…

83
Stuart says:
June 27, 16h

Oh and I can copy and paste just fine - safari 4!