Mozilla Hacks

the potential of web typography

Avatar photo By

Posted on June 29, 2009 in 35 Days, @font-face, CSS, and Firefox

This post counts as both a demo and commentary about the changing nature of typography on the web. Ian Lynam and Craig Mod have put together a page that is an excellent example of typography in action, but also offer some suggestions on what the next steps for typography on the web might look like. The page itself takes advantage of a number of typefaces that Craig and Ian got permission to use and uses a pleasing multi-column layout. Please click through to the complete article to get the full effect.

View the Demo in Firefox 3.5
potential

44 comments

  1. John Slater

    Awesome!

    June 29th, 2009 at 13:12

  2. Tomer

    As a non-native English speaker, it is harder for us to read connected Latin characters. Do not use script letters unless it’s readable enough or there is a user pref to disable the font.

    June 29th, 2009 at 13:14

  3. sep332

    The website seems to have gone down pretty fast. I don’t suppose anyone has a mirror, or a larger screenshot?

    June 29th, 2009 at 13:19

  4. sep332

    seems OK now, never mind

    June 29th, 2009 at 13:20

  5. ttfn

    Pity it looks so bad with cleartype turned off. :-(

    June 29th, 2009 at 13:48

  6. Adam

    You mentioned a couple times that @font-face is only available when using FF 3.5 but thats not exactly correct. Safari 4, ie6 & ie7 and the latest version of Opera also use @font-face.

    June 29th, 2009 at 17:01

  7. Hans Schmucker

    Sadly, Trunk running on Windows7 refuses to display the “Liza” font, resulting in a very strange layout for the headlines…

    Another problem is that Firefox for Windows accepts ttf files, which are used exclusively in the demo… however they are not supported on other platforms. I really think support for ttf files on Windows should be disabled ASAP as authors (as we can see here) are very likely to use ttf files when they appear to work, without knowing about these problems.

    And finally: Tomer has a point. You can turn linked fonts off via about:config, gfx.downloadable_fonts.enabled false, but we should really consider adding a GUI for it at Options/Content/Fonts.

    June 29th, 2009 at 18:26

  8. Craig Mod

    @Adam: It seems like Safari and Opera both have issues interpreting @font-face references when used with pseudo selectors such as first-line.

    While some of the referenced fonts render as expected in Safari and Opera, only Firefox 3.5 generates the full intended results.

    Maybe we’ve screwed something up in the CSS that’s throwing Safari/Opera off. If you have any suggestions, please let us know!

    Best,
    Craig

    June 29th, 2009 at 21:03

  9. Alex

    TTF/OTF files are supported by Windows, OS X and Linux (fontconfig/freetype/pango), TrueType is the standard font format (Created by Apple, extended by Adobe and MS as OpenType)

    Even platforms like OS/2 and Windows CE support TTF/OTF files.

    June 29th, 2009 at 21:06

  10. […] To comment on this demo, please do so at the hacks.mozilla.org post. […]

    June 29th, 2009 at 22:50

  11. Hans Schmucker

    Terribly Sorry, seems like I mixed something up:
    For some reason I thought I remembered TTF files not working on Linux.

    June 30th, 2009 at 04:48

  12. Hanspeter

    Unfortunately, the demo page falls into the trap of using fonts with funny characters that are placed in the same code location as normal letters. So to get those fancy leaves/fruits for the major bullet points, the authors typed ‘A’, ‘B’, etc and then styled it to look like section markers. Any browser that fails to download the needed font (not just those that don’t support @font-face) will then draw the now random looking letter into the middle of the text. Very poor design.

    June 30th, 2009 at 07:09

  13. Staś Małolepszy

    This is a really great demo of the @font-face rule’s capabilities. One thing I’m slightly concerned though, is how they use regular letters (“A”, “B”) styled with a custom font (“FaukinGlyph”) to present glyphs. As far as I understand it, this could potentially cause accessibility problems when the font file or font definition are not available (network issue, css turned off). The reader will see random letters at the beginning of each paragraph.

    It also means that you could create a font with a different than standard mapping between characters and glyphs. The HTML says one thing, and the user sees an entirely different thing in this case. Great way of protecting e-mail addresses, possibly, but also a way of walking around Bayesian spam or spoofing-attempts filters.

    June 30th, 2009 at 07:13

  14. Craig Mod

    @Hanspeter:

    Good point.

    Because of EULA licensing issues, we had to create custom glyph-limited editions (in collaboration and with the approval of Underware, of course) of some of the fonts, including the special glyph font. For convenient reference we placed the glyphs in A B C D E F knowing this was a highly specific demo for Firefox 3.5. Of course, we recommend methods that degrade more gracefully for production sites expected to be accessed by an unpredictable variety of browsers.

    June 30th, 2009 at 08:41

  15. […] Docs; the ability to show video built into Web pages without plug-ins; a private browsing mode; fancy downloadable fonts; and geolocation technology that can let Web sites know where you […]

    June 30th, 2009 at 09:03

  16. […] Docs; the ability to show video built into Web pages without plug-ins; a private browsing mode; fancy downloadable fonts; and geolocation technology that can let Web sites know where you […]

    June 30th, 2009 at 09:43

  17. […] 3.5, which was released earlier today (June 30th), most noteworty items from that release is the @font-face css-attribute, that allows web-designers to bundle custom fonts with their website designs, and use […]

    June 30th, 2009 at 09:45

  18. […] Docs; the ability to show video built into Web pages without plug-ins; a private browsing mode; fancy downloadable fonts; and geolocation technology that can let Web sites know where you […]

    June 30th, 2009 at 09:53

  19. Gérard Talbot

    Hello all,

    There is a malformed URI reference in the demo at line 49:

    a href=”http://github.com/blog/363-cufón-a-sifr-alternative” Cufon /a

    The o with acute accent should be escaped: %F3 is the correct way to do this.

    HTML 4.01, section B.2.1 Non-ASCII characters in URI attribute values
    http://www.w3.org/TR/html4/appendix/notes.html#non-ascii-chars

    regards, Gérard

    June 30th, 2009 at 10:49

  20. Ricardo Esteves

    There’s an issue that i’d like to have a better understanding. How can @fontface help web designers to build a web with more typographic richness, without exposing commercial font files for everybody’s download (piracy)?

    June 30th, 2009 at 11:25

  21. […] any performance problems you may be experiencing–and tell us which features (downloadable fonts, perhaps?) you like […]

    June 30th, 2009 at 11:33

  22. elmimmo

    There is the issue about file size. CJK fonts tend to be huge. Microsoft’s WEFT could scan a page and create a new font file (although in their own “font object” format) stripping all unnecessary glyphs for that particular page.

    I think that was a neat idea.

    June 30th, 2009 at 12:09

  23. […] Docs; the ability to show video built into Web pages without plug-ins; a private browsing mode; fancy downloadable fonts; and geolocation technology that can let Web sites know where you […]

    June 30th, 2009 at 12:42

  24. Lauren W.

    I’m not terribly web-savvy, but as a designer this is very exciting.

    Also, I updated to 3.5 to view the @font-face article correctly, and noticed that when I hit cmd+D to bookmark it, all of the text took on a shadow. It didn’t go away until I hit cmd+D again. I’ve never seen this happen before. It actually looks pretty cool, but what’s the story here?

    June 30th, 2009 at 14:56

  25. […] Docs; the ability to show video built into Web pages without plug-ins; a private browsing mode; fancy downloadable fonts; and geolocation technology that can let Web sites know where you […]

    June 30th, 2009 at 16:58

  26. Daniel

    Lauren: pressing D, B and G on the website will toggle a few fancy features. Thus, when pressing Cmd-D, you’re toggling the text shadow.

    Which leads me to an important rule they ignored: when performing keyboard handling, always check for modifier keys. Drop shadow shouldn’t toggle when the user wants to favorite your website, your numbers-only field shouldn’t block the user from pressing Ctrl-A, and so on.

    Also: if you plan to use custom fonts, please use font-size-adjust. Watching the text jumping around when the new fonts load is very, very annoying.

    June 30th, 2009 at 23:40

  27. Chaac

    I can’t seem to find ANY difference between the way Firefox and Safari render fonts in the demo. I uploaded a file to my server so you can see it for yourself: http://www.hclientes.com/font-face.png

    (Safari 4 on the left, Firefox 3.5 on the right)

    If you see any difference, please post.

    Greetings.

    July 1st, 2009 at 11:50

  28. Craig Mod

    @Chaac:

    Thanks for posting this screenshot. It’s subtle, but there is at least one difference: Safari’s interpretation of the margins / line-height of the drop-cap-glyphs. If you press ‘b’ on the page to turn on the baseline grid, the difference between the Firefox and Safari versions becomes much clearer.

    Best,
    C

    July 1st, 2009 at 19:15

  29. Chaac

    @Craig Mod:
    I have seen the baseline grid on both and I see the very small difference you mention. That’s it? It think the difference is too subtle to state only one browser renders “as intended”. I think both browsers do show “The potential of web typography” quite nicely.

    Greetings.

    July 1st, 2009 at 19:26

  30. John Drinkwater

    If you want to create custom glyphs for presentation, put them into the unicode private use block range so they dont clash with anything else on the planet…

    July 2nd, 2009 at 13:56

  31. Marcelo Cantos

    [I don’t work in this area, so please accept my apologies for taking up everyone’s time if my wonderful “new” idea turns out to be as old as the hills.]

    WRT licensing, the problem here is different to the one DRM usually tries to solve. Normally, DRM locks out the end-user from experiencing content they have sought and acquired, but haven’t gained the rights to experience. In this case, however, it is a class of content providers (web sites) that need to be controlled, with end-users invariably becoming unwitting cohorts. Perhaps a different solution is possible in this circumstance…

    Designers could digitally sign and license font files on a per-web-site basis. Most web browsers would refuse to load incorrectly licensed font-files, and report the “fingerprint” of unlicensed font-files to a monitoring agency (mostly just a database that maps each licensed fingerprint to an owner/email). Of course, reporting would be at the users discretion, so designers working on and testing fonts could opt out, and maybe even store the fingerprint as “trusted”. Web sites, however, would lack the ability to control reporting, and would thus expose themselves to copyright infringement charges. The fingerprint could also serve to prevent a designer from defrauding another designer by acquiring digital signing rights for someone else’s font.

    The only real sticking point is developing a robust fingerprinting method that survives font-tweaking by infringers. Some method that allows partial fingerprint matching and forces the infringer to materially alter the appearance of the font would be ideal. Normal digital “fingerprints” such as SHA-1 wouldn’t do.

    July 7th, 2009 at 14:43

  32. Marcelo Cantos

    Correction: the other major sticking point is that end-users can still pilfer legitimately-licensed fonts from a web site and use them in offline materials that aren’t subject to browser-reporting. This leaves us back in the tarpit of conventional DRM.

    July 7th, 2009 at 14:57

    1. Sam

      I don’t understand all this hype about it. IE got it since back 1994… ? So what’s the point? The point is THAT YOU MIGHT DISTRIBUTE COPYRIGHT PROTECTED FONTS IN A NON LEGAL MANNER and you might even do that in putting you client in bad light.

      So this works for free fonts (which basically are 90% crap or useless) and not for copyright protected fonts.

      So be carefull and don’t burn your fingers guys.

      April 29th, 2010 at 18:06

  33. Koolwriting.com

    It won’t catch on as well (virally) if we can’t use it inline. Does it work inline too, like with a “span” tag?

    For example, let’s say someone wants “kool” symbols of cats, dogs, whatever. People will use this if I can say, “Here, cut and paste this one line of code.”

    But if trying new fonts requires connecting “style” references in disparate sections of code, this confuses people, and you won’t see as much adoption, creative implementation by non-specialists.

    July 14th, 2009 at 12:37

  34. ugh

    Ugh, putting us all at the whim of tasteless “designers” the world over. I will continue to browse with “Allow pages to choose their own fonts” OFF, thanks.

    July 16th, 2009 at 17:32

  35. stk

    I found this article exciting. I went on to experiment (and succeed) with cross-browser font embedding and created a tutorial for anyone interested in embedding fancy fonts in their web pages.

    Bottom line: With FFx’s support of @font-face, it’s now possible for cross-browser font embedding with FFx, Safari, IE6, IE7 and IE8 (and purportedly Opera v10 & Google Chrome following soon).

    My observation: Of all the user agents that render embedded fonts, FireFox is the only one that shows a perceptible delay, when loading a page containing embedded fonts (i.e., page initially renders with – assume “the default” fonts – then re-renders and “flashes”, loading the embedded fonts).

    This text-replacement re-rendering is most annoying and I’m wondering if there is way for FireFox to remedy this, as other user agents seem to have accomplished?

    (Behavior noted in FireFox for both on my “x-Browser Fonts” article and the “Potential of Web Typography” article).

    Cheers,
    -stk

    July 18th, 2009 at 08:49

  36. Matthew

    Thank you for sharing this demo. I noticed your demo page works just fine on a Mac with FF 3.5.2, but does not work at all in Windows with FF 3.5.2. Both browsers allow pages to choose their own fonts. Any thoughts?

    Kind regards,
    Matthew

    September 1st, 2009 at 00:41

  37. Vivian

    As exciting as this is, I can’t help but have some fears about @font-face leading to a lot of ugly typography on the internet.

    Hopefully it will make the internet a more beautiful place, and not like a bunch of designers got drunk on the punch and barfed fonts everywhere.

    My full blog post: http://blog.twg.ca/2009/09/4-fears-of-font-face/

    September 8th, 2009 at 08:17

  38. stk

    @Matthew … this page works fine in my winFireFox3.5.2 … dunno what the problem might be

    September 9th, 2009 at 00:54

  39. Wtk

    Other the CSS how does the font get on the page? Is it temporarily installed on the end users computer?

    May 13th, 2010 at 05:14

  40. Bhupesh

    Hi,
    I am trying this on firefox 3.5 with NoScript extension and it does not work if NoScript is enabled.

    Why is that? What does it have to do with javascript if this is purely a CSS thing?

    September 21st, 2010 at 22:18

    1. Bhupesh

      well, it turns out noscipt does not like @font-face property.
      Otherwise works even if js is turned off in browser itself.

      September 21st, 2010 at 22:30

      1. John Drinkwater

        NoScript prevents loading @font-face by default because it could be used to run malicious code on your system (via buffer overflows, etc)
        http://hackademix.net/2010/03/24/why-noscript-blocks-web-fonts/

        September 26th, 2010 at 07:24

  41. Yoga Das

    I use @font-face {
    font-family:”Concielian Break”;
    src: url(“../font/concav2.ttf”)
    }

    but this font does not show mozila firefox.

    March 12th, 2011 at 06:15

Comments are closed for this article.