Typography On the Web Gets Different

bstender writes "Most major browsers — including the latest versions of Internet Explorer, Firefox, Safari, Chrome, and Opera — recognize a CSS rule known as @font-face. What that means, in brief, is that Web developers can now easily embed downloadable fonts in their pages. To see an example, load up Firefox 3.5 or Safari 4 and learn more. You'll see three new typefaces — Liza, Auto, and Dolly — used in the body text and headlines." No doubt the licensing issues are just as complex as the font nerd potential.

IE doesn't support font-face

[verbalcontract]

I was under the impression that no version of IE supported @font-face?

http://arstechnica.com/web/news/2009/07/font-face-typekit-and-font-licensing-the-state-of-web-type.ars

To disable @font-face in Firefox 3.5

[GeekDork]

In about:config, set gfx.downloadable_fonts.enabled to false and restart the browser.

Re:Oh Lord!

[DanTheStone]

Firefox has a checkbox in Tools -> Options -> Content -> Fonts and Colors -> Advanced to disable this, if you so desire.

Re:IE doesn't support font-face

[HappyHead]

Actually, it does support @font-face, just not with standard font files. Microsoft's reason for this was because some people make TrueType font files and put them under copywrite,and they felt that allowing the use of .ttf files for font distribution would enable copywrite violations. Instead, you have to use a Microsoft utility to convert the font files into a special Microsoft font format for web pages called EOT - which doesn't actually solve the stated problem, but does make it difficult for anyone else to use the font file for things other than embedding in web pages that will be viewed with IE after you've put it on your website.

http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work [jontangerine.com]

At least you'll have options

[Nerdposeur]

I know some css nerds will tell me if I feel that way I should use my own css. first off I don't have time for that. second, it's likely if I mess with CSS on an overly tuned web page i;ll make it less readable not more.

I still think this can only improve your situation. As you said, you can use your own CSS, or none at all (in FireFox: View > Page Style > No Style). You may be too lazy to change it, but at least you'll have the option.

People already use non-standard fonts on web pages. They just use images or Flash or whatever, which gives the user zero control over appearance.

Additional benefits: since these wacky fonts will be sent as actual text, you'll still be able to Control+F search them, resize them, index them with a search engine, or have them read to you if you're blind.

Re:IE doesn't support font-face

[Anonymous Coward]

I managed to get @font-face working for all browser supporting it, buy having both .ttf and .eot files and IE CSS conditional comment. Also, check ttf2eot [google.com] for a tool that run on linux if you don't want to use MS's tool.

Re:Oh Lord!

[cluke]

Haven't tried it, but I would imagine that about:config -> gfx.downloadable_fonts.enabled would probably do the trick.

Just tried it, that works. You need to restart the browser though.

Reality check

[scarlac]

From the Slashdot post:
> (...) latest versions of Internet Explorer, Firefox, Safari, Chrome, and Opera - recognize a CSS rule known as @font-face

From the linked page viewed in IE7:
> "This demo appears as intended only in Firefox 3.5"

The demo page shows the issue so clearly: You forgot IE. IE8 still doesn't have font-face support for TTF which is possibly the only format people will like to use.

I work with CSS most of my day but I doubt that I will have the pleasure of setting up sites with custom fonts for several years to come with the release cycles and popularity of IE as we have it today. For now we can be happy that IE8 can actually pass the acid2 test.

Regards
Seph

Not on Chromium?

[Anonymous Coward]

I couldn't get any font format to work on latest Chromium or Iron. What's the deal with that? Do I need to copy over some DLLs from a Chrome install, as for video?

To convert TTF to that weird Microsoft EOT format, ttf2eot [google.com] works fine and is dead simple to use. What do I use to convert between OTF and TTF? Someone told me to just rename the file as they're very similar, but that didn't work.

Re:IE doesn't support font-face

[Anonymous Coward]

Fortunately, there's ttf2eot [google.com]. It's as easy as ttf2eot pinkunicorns.ttf pinkunicorns.eot, and it converts the whole font, not just the codepoints you currently use. Don't include a type attribute in the CSS for IE. What works best is to include the IE stylesheet with a conditional comment so that other browsers won't load it.

Re:typekit

[Excors]

Subsetting is not EOT functionality - EOT is basically just a wrapper around a TTF file, and subsetting just involves modifying the TTF, so you can do exactly the same in browsers that read raw TTF files. I've written a font optimizer tool [html5.org] (open source) that does that. (Windows has an API to generate embedded fonts with subsetting, which the WEFT tool uses; I'm not currently aware of any other subsetting implementations.)