Coolest thing since Sliced Bread: Fontshop releases Web FontFonts

When I opened my monthly FontShop newsletter this morning, I swear I heard angels singing. FontShop has released over 30 of it’s most popular faces in WOFF and EOT Lite format. This includes faces such as FF DIN (yes!), FF Meta, FF Dax, FF Kievit and others. WOFF/EOT Lite format is a type of font file specifically made for web to be used in conjunction with the @fontface CSS property. This property allows designers to use any typeface on the web, providing the font file is in the correct safe for web format. Yes, you heard me, THIS PROPERTY ALLOWS DESIGNERS TO USE ANY TYPEFACE ON THE WEB. Hear those angels yet? Click the image above to view Fontshop’s blog post and learn more about how to utilize their Web FontFonts. If you are experiencing a lost connection when viewing their post, sit tight, there are many excited designers trying to access this page as well.

Fontshop's announcement

  • http://alinear.net Nero Bossa

    You know technically you could already use @fontface to specify a resource in TTF (true type) or OTF (open type) format under both Safari (Webkit, Chrome) and more recent Firefox — Only IE requires the specific EOT (embedded open type) format. So if you already own the FontFont faces you want (or any others) in standard formats you could use them (just not in Internet Destroyer out of the box)

    You can technically convert TTF/OTF to EOT using any of these tools:
    http://www.kirsle.net/wizards/ttf2eot.cgi
    http://onlinefontconverter.com/

    (See this post):
    http://circuitbomb.com/index.php/2009/09/easy-oft-to-eot-conversion-for-font-face-css3-and-internet-explorer/

    If you wanted to now support all browsers with embedded fonts you could just (assuming you have the TTF/OTF to begin with):

    (1) Convert the fonts to have both a TTF/OTF version (the original) and an EOT version for IE.

    (2) Make a default CSS that declares the @font-face (pointing to the TTF/OTF version)

    (3) Use either a ‘conditional comments’ approach (a non-JS way that IE only recognizes) or a simple JS-based browser detection to append an additional CSS for IE-only…

    (4) In that CSS (for IE) override your @font-face declaration with one pointing to the EOT version…

    If you had issues with Firefox supporting the TTF/OTF natively (sorry, at the moment I can’t fully recall which versions support which level of font embedding) you could just use a JS-based detection (at step 3 above) and also have the alternate CSS applied to Firefox

    This was technically done (in more limited form, since at the time @font-face support was pretty limited to Safari/Chrome) for CharacterArcade — to specify Gotham TTF for headlines (rolling back to Verdana for the other browsers).

    Another tip: If you are going to use a font for the web (in TTF/OTF) it is helpful to open the font resource in a font editor first and remove all the extended character data you won’t need (for example extended latin characters if you don’t need them). This reduces the font size significantly, which is useful since the font asset will have to download as part of the CSS -before- the page renders at all. Not dissimilar to using Flash to embed fonts and having to decide which characters to include for optimization.

    So in summary… cool that they are bundling these to make it easy for people — but if you already own the FF faces using them for the web is a pretty simple process.

  • Meagan

    Agreed on all you’re points, however the biggest drawback to those methods you mentioned is that legally, you may only use free typefaces. I’m not to fluent on how, technically, this works, but in essence by using the embedding method (whether Sifr or @fontface) you may be violating copyright laws: (http://www.fontembedding.com/local/documents/EULA-embedding.pdf from http://www.fontembedding.com/fonts-and-the-law/)

    Therefore, the reason why FontFonts is an amazing innovation is not because of their use for the @fontface property, but that they have developed a system which allows designers to LEGALLY use their typefaces on the web. This is a great influence for other foundries to step up and follow suite.

    Of course, if you wanted to be sneaky about it you could go right ahead and convert any font, regardless of license, to EOT. But why would you want to give any type designer the right to sue you? Especially considering how much time and effort they put into these faces.