Comments on: Coolest thing since Sliced Bread: Fontshop releases Web FontFonts http://blog.glowinteractive.com/2010/02/coolest-thing-since-sliced-bread-fontshop-releases-web-fontfonts/ codify, media, gaming, industry ramblings, finance Sat, 05 May 2012 22:49:00 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: Meagan http://blog.glowinteractive.com/2010/02/coolest-thing-since-sliced-bread-fontshop-releases-web-fontfonts/#comment-211 Meagan Wed, 12 May 2010 19:39:27 +0000 http://blog.glowinteractive.com/?p=758#comment-211 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. 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.

]]> By: Nero Bossa http://blog.glowinteractive.com/2010/02/coolest-thing-since-sliced-bread-fontshop-releases-web-fontfonts/#comment-206 Nero Bossa Wed, 12 May 2010 14:46:47 +0000 http://blog.glowinteractive.com/?p=758#comment-206 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. 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.

]]>