5 ms·

A question a little bit off topic. I am a developer, but I have been trying to push my boundaries. I am using a lot the @font-face css rule, but I noticed that

A question a little bit off topic. I am a developer, but I have been trying to push my boundaries. I am using a lot the @font-face css rule, but I noticed that most of the websites keep using image replacement for text. Why is that? Is bad to use the @font-face rule?

rossriley 16y ago
Two reasons. 1. IE support whilst possible doesn't give great quality results, especially at smaller point sizes. 2. Font licensing hassle. None of the foundries seem to want to license fonts and getting an online license is often too much hassle. Image replacement is ok, since you're not making the font file and metrics available to download.
- endtwist 16y ago
  Actually, point #2 is wrong. Most of the major foundries have their own font licensing system these days (or it's a work-in-progress). It's not the greatest solution since you can't have all your licensed fonts in, say, TypeKit, but it's not too bad. - Linotype/Monotype: http://webfonts.fonts.com/ http://webfonts.fonts.com/ - Bitstream: http://new.myfonts.com/info/webfonts/ http://new.myfonts.com/info/webfonts/ - FontFont: http://www.fontfont.com/opentype/ http://www.fontfont.com/opentype/ - TypeKit (various foundries): http://typekit.com http://typekit.com …and Hoefler & Frere-Jones is currently working on a web font licensing system as well.
  - ugh 16y ago
    Wrong is too harsh. Those are all recent developments, sometimes work in progress. Licensing wasn’t easy only a few months ago and it is only now getting gradually easier. It’s – like the grandparent said – a hassle.
  - rossriley 16y ago
    Yes, that may be true but that's some foundries and some fonts. How these things normally work is that the branding and typography for a brand is done by a separate agency who specify the typefaces, then a separate digital agency have to implement it. If the chosen typeface isn't available with an online license then you have to fall back to replacement. Maybe in another year or so things will have improved to the state where more typefaces are available for online use than not.
  - Chris_Newton 16y ago
    > Most of the major foundries have their own font licensing system these days (or it's a work-in-progress). Perhaps, but are any of them commercially reasonable yet? Pretty much all of the ones I've seen require either ongoing payments and/or third party hosting, or an up-front fee that scales with the (anticipated?) number of page views. As far as I can see, no-one else providing a related product/service gets these kinds of terms: would you pay a monthly fee for a piece of clip art, or a higher licensing fee based on how many times you wanted to print your annual report on paper?
eps 16y ago
Rendering differences is the reasons. To get the site to look consistent across all major browsers and platforms Cufon is the only practical option at the moment. The licensing issues is a problem of its own even with image replacement... even if it's a server-side image replacement like Flir. Many foundries are still scared sh#tless of the Internet and are overly protective of their work. Some are not, for example - surprise - Adobe and Dalton Maag. For other fondries however it's a business decision. For example, one cannot use any of HF&J fonts such as Gotham and Archer online in any form or fashion. They are building their own font service. Anytime you see a site sporting Gotham under Cufon, it's an explicit license violation. So in short - if you are considering using a font with an image replacement, check the license. If it is not explicitly permitted, then in all likelihood it is disallowed. If still set on using this font, email foundry and ask.
- tptacek 16y ago
  You mean I can't automatically embed HFJ faces, right? If I painstakingly Photoshop my hedlines, I can use Archer for that, right? Also, when implying that font-face has dealbreaking rendering quality issues, are you referring to their performance for setting body copy, or do you think it flat out doesn't work for display type either?
  - nborgo 16y ago
    This flowchart might clear up the rendering differences: http://typophile.com/node/70216 http://typophile.com/node/70216 It's not so much that rendering a whole bunch of text takes a while (though it might, but it probably has more to do with the time it takes to download the font), but more that the letters look different depending on who looks at it. After that, it's up to the designer to decide whether or not the difference is acceptable. I'd say it works out fine in pretty much all cases. Your site doesn't have to look the same in all browsers, people.
  - eps 16y ago
    > You mean I can't automatically embed HFJ faces, right? If I painstakingly Photoshop my hedlines, I can use Archer for that, right? Yes on both counts. > Also, when implying that font-face has dealbreaking rendering quality issues, are you referring to their performance for setting body copy, or do you think it flat out doesn't work for display type either? Depends on the typeface, or more specifically on whether it was explicitly tested and "optimized" for @font-face use, which typically refers to generating hinting info needed to make the font render decently on non-Apple platforms. For example, Museo will render great in all browsers, while something like Avenir will look bloody awful in smaller sizes in FF (not that it is available for online use to begin with). This narrows down the list of usable @font-face typefaces quite a bit, it also complicates testing and what not.

rossriley 16y ago

Two reasons. 1. IE support whilst possible doesn't give great quality results, especially at smaller point sizes. 2. Font licensing hassle. None of the foundries seem to want to license fonts and getting an online license is often too much hassle. Image replacement is ok, since you're not making the font file and metrics available to download.

endtwist 16y ago
Actually, point #2 is wrong. Most of the major foundries have their own font licensing system these days (or it's a work-in-progress). It's not the greatest solution since you can't have all your licensed fonts in, say, TypeKit, but it's not too bad. - Linotype/Monotype: http://webfonts.fonts.com/ http://webfonts.fonts.com/ - Bitstream: http://new.myfonts.com/info/webfonts/ http://new.myfonts.com/info/webfonts/ - FontFont: http://www.fontfont.com/opentype/ http://www.fontfont.com/opentype/ - TypeKit (various foundries): http://typekit.com http://typekit.com …and Hoefler & Frere-Jones is currently working on a web font licensing system as well.
- ugh 16y ago
  Wrong is too harsh. Those are all recent developments, sometimes work in progress. Licensing wasn’t easy only a few months ago and it is only now getting gradually easier. It’s – like the grandparent said – a hassle.
- rossriley 16y ago
  Yes, that may be true but that's some foundries and some fonts. How these things normally work is that the branding and typography for a brand is done by a separate agency who specify the typefaces, then a separate digital agency have to implement it. If the chosen typeface isn't available with an online license then you have to fall back to replacement. Maybe in another year or so things will have improved to the state where more typefaces are available for online use than not.
- Chris_Newton 16y ago
  > Most of the major foundries have their own font licensing system these days (or it's a work-in-progress). Perhaps, but are any of them commercially reasonable yet? Pretty much all of the ones I've seen require either ongoing payments and/or third party hosting, or an up-front fee that scales with the (anticipated?) number of page views. As far as I can see, no-one else providing a related product/service gets these kinds of terms: would you pay a monthly fee for a piece of clip art, or a higher licensing fee based on how many times you wanted to print your annual report on paper?

eps 16y ago

Rendering differences is the reasons. To get the site to look consistent across all major browsers and platforms Cufon is the only practical option at the moment. The licensing issues is a problem of its own even with image replacement... even if it's a server-side image replacement like Flir. Many foundries are still scared sh#tless of the Internet and are overly protective of their work. Some are not, for example - surprise - Adobe and Dalton Maag. For other fondries however it's a business decision. For example, one cannot use any of HF&J fonts such as Gotham and Archer online in any form or fashion. They are building their own font service. Anytime you see a site sporting Gotham under Cufon, it's an explicit license violation. So in short - if you are considering using a font with an image replacement, check the license. If it is not explicitly permitted, then in all likelihood it is disallowed. If still set on using this font, email foundry and ask.

tptacek 16y ago
You mean I can't automatically embed HFJ faces, right? If I painstakingly Photoshop my hedlines, I can use Archer for that, right? Also, when implying that font-face has dealbreaking rendering quality issues, are you referring to their performance for setting body copy, or do you think it flat out doesn't work for display type either?
- nborgo 16y ago
  This flowchart might clear up the rendering differences: http://typophile.com/node/70216 http://typophile.com/node/70216 It's not so much that rendering a whole bunch of text takes a while (though it might, but it probably has more to do with the time it takes to download the font), but more that the letters look different depending on who looks at it. After that, it's up to the designer to decide whether or not the difference is acceptable. I'd say it works out fine in pretty much all cases. Your site doesn't have to look the same in all browsers, people.
- eps 16y ago
  > You mean I can't automatically embed HFJ faces, right? If I painstakingly Photoshop my hedlines, I can use Archer for that, right? Yes on both counts. > Also, when implying that font-face has dealbreaking rendering quality issues, are you referring to their performance for setting body copy, or do you think it flat out doesn't work for display type either? Depends on the typeface, or more specifically on whether it was explicitly tested and "optimized" for @font-face use, which typically refers to generating hinting info needed to make the font render decently on non-Apple platforms. For example, Museo will render great in all browsers, while something like Avenir will look bloody awful in smaller sizes in FF (not that it is available for online use to begin with). This narrows down the list of usable @font-face typefaces quite a bit, it also complicates testing and what not.