How new is @font-face, and what do I need to know before I add it to a website?

views:

117

answers:

+1 Q:

How new is @font-face, and what do I need to know before I add it to a website?

I started getting into reading design blogs a little while ago, and it seemed that @font-face got really popular sometime late last year, or something like that, because I was under the impression that it was a new emerging feature of the web. But then I saw that Internet Explorer has had it since IE4 (with some conversion).

So is it common to see @font-face online nowadays? Sould I have anything in mind with respect to accessibility, legality, or rendering before I do something like this? I saw that Hulu.com renders fonts with Canvas and a javascript called "cufon."

So is it common to see @font-face online nowadays? Sould

No. It is still fairly bleeding edge as far as wide browser support is concerned.

accessibility

Not unless you choose to use a font that is hard to read.

legality

Read the license of the font to make sure it allows embedding

rendering

Beware the flash of default fonts before the one you specify is downloaded.

David Dorward 2010-05-23 21:46:20

The only way to avoid things changing as the page elements are loaded is to preload everything, which delays the user's access to the page information for a cosmetic reason.

reisio 2010-05-23 22:47:23

That doesn't stop it being something you should keep in mind though.

David Dorward 2010-05-24 05:19:01

Insofar as it can be good to know how to completely waste your time and that of end users? I guess it doesn't.

reisio 2010-05-25 04:49:22

I have no idea what you mean by that (OK, not true, I have multiple ideas, but don't know if any are right). It is a problem. It is something to be aware of. My reaction to it when I started playing with it on a limited time project was "That looks awful, I'll stick with fonts the user already has". You appear to think (and I could be wrong, see above) that I'm saying "You must take steps to pause display of content while fonts download" (which I'm not saying, I'm only focusing on the existence of a problem, not recommending any particular way of dealing with it (or dealing with it at all)).

David Dorward 2010-05-25 05:53:06

When http://dorward.me.uk/ loads, it takes a little longer for the background to load. Beware the flash of background color before the background image you specify is downloaded.

reisio 2010-05-25 09:13:04

David Dorward 2010-05-25 09:25:16

No it isn't. What if someone walks in front of the monitor? What if the user blinks? What if they hit ESC or their connection dies or they just have CSS disabled or a local CSS set?

reisio 2010-05-25 10:07:23

In reverse order. Then they don't get the change in font and it isn't a problem. Ditto. Oh good grief. Oh good grief again.

David Dorward 2010-05-25 10:21:14

My sentiments exactly.

reisio 2010-05-26 04:55:22

+2 A:

It's not amazingly common yet, but all relevant browsers support it.
http://reisio.com/examples/webfonts/

reisio 2010-05-23 22:46:00

I went to a presentation about the state of web fonts last week.

The slides are here:

http://www.slideshare.net/matthewbuchanan/the-state-of-web-type

It should help answer a lot of your questions

Cato Johnston 2010-05-23 22:59:21

See here for browser compatibility. All browsers except for IE currently support it.

Felix 2010-05-23 23:06:23

This is not correct.

reisio 2010-05-23 23:14:31

-1 That pages' definition of "IE support" is too narrow. EOT files can be easily generated from OTF and TTF files.

egrunin 2010-05-24 01:09:15

But no one else uses EOT and many will be using WOFF. "That page" is followed by quite a few high placed people and Fyrd ("Alex") is quite respected.

Rob 2010-05-24 02:28:10

@Rob: That pages' definition of "IE support" is too narrow to answer **the original question**, which was about `@font-face`, not EOT vs OTF. I didn't say it was factually incorrect.

egrunin 2010-05-24 05:37:52

@egrunin Yes, that is the point. You need to convert your fonts to EOT in order for them to work with IE. @Rob how is it too narrow? The page clearly says that all browsers except for IE fully support this feature, while IE only supports it if you use EOT fonts. What more detail do you want?

Felix 2010-05-24 09:10:12

@Felix: @Rob *agreed* with you. I disagreed because, again, that page is completely correct in itself but uses a definition of "IE support" that is not relevant to the OP, who is not concerned about "standards" in the abstract but just wants to be shown how to get his work done.

egrunin 2010-05-24 14:33:06

IE supports @font-face. The code necessary for making it work with IE is completely standards compliant. The spec does not demand any particular font format.

reisio 2010-05-25 04:48:17

**@egrunin** The OP asks what he "should know before using @font-face in a website". I think the fact that IE only supports EOT fonts is one of those things. Also, I don't think he "wants to be shown how to get his work done", that's what tutorials and W3C specs are for. **@reisio** yes, it is correct. I just tried using some OTF fonts with IE8 and it didn't work, while it worked in other browsers (such as Chrome and Firefox).

Felix 2010-05-25 07:22:13

That's not particularly relevant, as @font-face does not require supporting OTF.

reisio 2010-05-25 09:09:26

+2 A:

Short answer: over 90% of browsers in use support @font-face if you get the syntax just right.

Long answer: the tough thing about @font-face is that different browsers need slightly different css, and that IE needs EOT.

Easy solution: FontSquirrel will take your font and give you the css and the EOT. For free.

egrunin 2010-05-24 01:30:06

+1 excellent resource

Moak 2010-05-24 04:17:03

ansaurus

tags:

views:

answers:

How new is @font-face, and what do I need to know before I add it to a website?

related questions