Slashdot Mirror

← Back to Stories (view on slashdot.org)

Typography On the Web Gets Different

Posted by CmdrTaco on from the but-i-miss-comic-sans dept.

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.

11 of 378 comments (clear)

  1. IE doesn't support font-face by verbalcontract · · Score: 4, Informative

    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

    1. Re:IE doesn't support font-face by HappyHead · · Score: 4, Informative
      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

    2. Re:IE doesn't support font-face by Anonymous Coward · · Score: 5, Informative

      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 for a tool that run on linux if you don't want to use MS's tool.

    3. Re:IE doesn't support font-face by Anonymous Coward · · Score: 2, Informative

      Fortunately, there's ttf2eot. 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.

  2. To disable @font-face in Firefox 3.5 by GeekDork · · Score: 5, Informative

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

    --

    Fight hunger. Filet a politician and send him to a 3rd world country of your choice.

  3. Re:Oh Lord! by DanTheStone · · Score: 3, Informative

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

  4. At least you'll have options by Nerdposeur · · Score: 3, Informative

    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.

  5. Re:Oh Lord! by cluke · · Score: 2, Informative

    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.

  6. Reality check by scarlac · · Score: 2, Informative

    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

  7. Not on Chromium? by Anonymous Coward · · Score: 1, Informative

    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 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.

  8. Re:typekit by Excors · · Score: 2, Informative

    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 (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.)