Mozilla

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

Comments are now closed.

  1. John Slater wrote on June 29th, 2009 at 13:12:

    Awesome!

  2. Tomer wrote on June 29th, 2009 at 13:14:

    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.

  3. sep332 wrote on June 29th, 2009 at 13:19:

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

  4. sep332 wrote on June 29th, 2009 at 13:20:

    seems OK now, never mind

  5. ttfn wrote on June 29th, 2009 at 13:48:

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

  6. Adam wrote on June 29th, 2009 at 17:01:

    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.

  7. Hans Schmucker wrote on June 29th, 2009 at 18:26:

    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.

  8. Craig Mod wrote on June 29th, 2009 at 21:03:

    @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

  9. Alex wrote on June 29th, 2009 at 21:06:

    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.

  10. Pingback from Mozilla in Asia » Blog Archive » the potential of web typography on June 29th, 2009 at 22:50:

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

  11. Hans Schmucker wrote on June 30th, 2009 at 04:48:

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

  12. Hanspeter wrote on June 30th, 2009 at 07:09:

    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.

  13. Staś Małolepszy wrote on June 30th, 2009 at 07:13:

    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.

  14. Craig Mod wrote on June 30th, 2009 at 08:41:

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

  15. Pingback from Mozilla releases Firefox 3.5 | Design Website Blog on June 30th, 2009 at 09:03:

    […] 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 […]

  16. Pingback from Mozilla releases Firefox 3.5 on FMIF.uk.to on June 30th, 2009 at 09:43:

    […] 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 […]

  17. Pingback from elblogg » Blog Archive » Great news in the software world on June 30th, 2009 at 09:45:

    […] 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 […]

  18. Pingback from The Cheap Computer Geek » Blog Archive » Mozilla releases Firefox 3.5 on June 30th, 2009 at 09:53:

    […] 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 […]

  19. Gérard Talbot wrote on June 30th, 2009 at 10:49:

    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

  20. Ricardo Esteves wrote on June 30th, 2009 at 11:25:

    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)?

  21. Pingback from Firefox 3.5 Is Now Available. Here’s What It Can Do. - Gadgetwise Blog - NYTimes.com on June 30th, 2009 at 11:33:

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

  22. elmimmo wrote on June 30th, 2009 at 12:09:

    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.

  23. Pingback from Firefox 3.5, or how I spent my day | The Church of Jesus Christ on June 30th, 2009 at 12:42:

    […] 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 […]

  24. Lauren W. wrote on June 30th, 2009 at 14:56:

    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?

  25. Pingback from Mozilla releases Firefox 3.5 - Programming Blog on June 30th, 2009 at 16:58:

    […] 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 […]

  26. Daniel wrote on June 30th, 2009 at 23:40:

    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.

  27. Chaac wrote on July 1st, 2009 at 11:50:

    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.

  28. Craig Mod wrote on July 1st, 2009 at 19:15:

    @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

  29. Chaac wrote on July 1st, 2009 at 19:26:

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

  30. John Drinkwater wrote on July 2nd, 2009 at 13:56:

    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…

  31. Marcelo Cantos wrote on July 7th, 2009 at 14:43:

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

  32. Marcelo Cantos wrote on July 7th, 2009 at 14:57:

    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.

    1. Sam wrote on April 29th, 2010 at 18:06:

      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.

  33. Koolwriting.com wrote on July 14th, 2009 at 12:37:

    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.

  34. ugh wrote on July 16th, 2009 at 17:32:

    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.

  35. stk wrote on July 18th, 2009 at 08:49:

    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

  36. Matthew wrote on September 1st, 2009 at 00:41:

    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

  37. Vivian wrote on September 8th, 2009 at 08:17:

    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/

  38. stk wrote on September 9th, 2009 at 00:54:

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

  39. Wtk wrote on May 13th, 2010 at 05:14:

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

  40. Bhupesh wrote on September 21st, 2010 at 22:18:

    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?

    1. Bhupesh wrote on September 21st, 2010 at 22:30:

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

      1. John Drinkwater wrote on September 26th, 2010 at 07:24:

        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/

  41. Yoga Das wrote on March 12th, 2011 at 06:15:

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

    but this font does not show mozila firefox.

Comments are closed for this article.