Web Font Replacement


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Font Replacement

  1. 1. 10/28/09 HUGE / ParentsConnect / HUGE 45 Main Street, 2nd Floor NY NY 11201 718.625.4843 www.hugeinc.com Font replacement Fonts for the web August 11th, 2009
  2. 2. <ul><li>The problem: </li></ul><ul><li>We need to support our designers and know what we can and shouldn’t compromise </li></ul><ul><li>CSS image replacement is tiring and not always the best solution </li></ul>HUGE / New Browsers Font replacement
  3. 3. <ul><li>Methods: @font-face </li></ul><ul><li>Pros </li></ul><ul><li>CSS awesome and easy </li></ul><ul><li>@font-face { </li></ul><ul><li>font-family:&quot;Fontin Sans&quot;; </li></ul><ul><li>src: url(&quot;FontinSansR.ttf&quot;); </li></ul><ul><li>} </li></ul><ul><li>h1 {font-family:”Fontin Sans&quot;, &quot;Trebuchet MS&quot;, sans-serif;} </li></ul>HUGE / New Browsers Font replacement
  4. 4. <ul><li>Methods: @font-face </li></ul><ul><li>Cons </li></ul><ul><li>Licensing, licensing, licensing! </li></ul><ul><li>Limited compatibility </li></ul>HUGE / New Browsers Font replacement https://developer.mozilla.org/index.php?title=En/CSS/%40font-face
  5. 5. <ul><li>Methods: sIFR (Javascript, Flash) </li></ul><ul><li>Pros </li></ul><ul><li>Non-intrusive scripting </li></ul><ul><li>Good type handling </li></ul><ul><li>Degrades well </li></ul><ul><li>Legal since font is contained in the SWF object </li></ul><ul><li>Text is selectable </li></ul><ul><li>Cons </li></ul><ul><li>Requires flash </li></ul><ul><li>Sometimes load time issues </li></ul><ul><li>FOUC (Flash of unstyled content) </li></ul>HUGE / New Browsers Font replacement
  6. 6. HUGE / New Browsers Font replacement <ul><li>Methods: Facelift, aka FLIR (Javascript, PHP) </li></ul><ul><li>Pros </li></ul><ul><li>Easy to configure </li></ul><ul><li>Legal since font is rendered as an image </li></ul><ul><li>Cons </li></ul><ul><li>Requires PHP and the GD library </li></ul><ul><li>Can’t select the text </li></ul><ul><li>Type not always rendered to precision </li></ul><ul><li>Requires additional server resources to process </li></ul>
  7. 7. HUGE / New Browsers Font replacement <ul><li>Methods: Cufon (Javscript, Canvas, VML) </li></ul><ul><li>FontForge script converts font file to SVG font. SVG font converted to VML paths, then converted to JSON </li></ul><ul><li>Pros </li></ul><ul><li>Easy to configure </li></ul><ul><li>Has best load time performance </li></ul><ul><li>Supports .otf and .ttf files </li></ul><ul><li>Cons </li></ul><ul><li>Selecting text is difficult </li></ul><ul><li>“ EULA prohibits the embedding of font data in any vector format, which alas includes SVG… Cufon violates paragraphs 1 and 3.1 of our EULA…” – Jonathe Hoefler, Hoefler & Frere-Jones </li></ul>
  8. 8. HUGE / New Browsers Font replacement
  9. 9. HUGE / New Browsers Font replacement So… sIFR – if we care about licenses Cufon – if we don’t
  10. 10. HUGE / New Browsers Font replacement But… http://www.slideshare.net/paul.irish/rich-typography-options-for-the-web
  11. 11. HUGE / New Browsers Font replacement <ul><li>Alternatives: what else is there? </li></ul><ul><li>TypeKit </li></ul><ul><li>FONTSMACK </li></ul><ul><li>The Future – Discussions from Typecon 2009 </li></ul>
  12. 12. HUGE / New Browsers Font replacement <ul><li>Alternatives: TypeKit (Javascript, …?) </li></ul><ul><li>Pros </li></ul><ul><li>Doesn’t require flash </li></ul><ul><li>Working with foundries to develop a consistent web-only font linking license </li></ul><ul><li>Will attempt to protect </li></ul><ul><li>Cons </li></ul><ul><li>Not here yet! </li></ul><ul><li>Price? </li></ul>
  13. 13. HUGE / New Browsers Font replacement <ul><li>Alternatives: FONTSMACK (Javascript, Flash) </li></ul><ul><li>Pros </li></ul><ul><li>Pre-generated flash SWFs for sIFR </li></ul><ul><li>Removes dependency for Flash software </li></ul><ul><li>Cons </li></ul><ul><li>Website is messed up </li></ul><ul><li>Legal issues? Removed commercial fonts… </li></ul><ul><li>Load time performance? </li></ul>
  14. 14. HUGE / New Browsers Font replacement <ul><li>Alternatives: The Future </li></ul><ul><li>Web font services </li></ul><ul><li>TypeKit - TBD </li></ul><ul><li>Fontdeck - TBD </li></ul><ul><li>Kernest!!! - $15/year/website </li></ul>
  15. 15. HUGE / New Browsers Font replacement <ul><li>Alternatives: The Future </li></ul><ul><li>.webfont (proposed) </li></ul><ul><li>A zipped file that contains the font data and an XML file with meta data, such as permissions on which websites the font can be used </li></ul><ul><li>Foundries support, but will take years </li></ul>
  16. 16. HUGE / New Browsers Font replacement <ul><li>Alternatives: The Future </li></ul><ul><li>EOT Lite - .EOT font format (proposed) </li></ul><ul><li>Since IE4, a font format that enables real fonts to be temporarily embedded in web pages </li></ul><ul><li>Based on TTF and OTF, with additional information – reader can see font to view the page, but cannot download/steal the font afterwards </li></ul><ul><li>Currently, EOT is a product of IE’s proprietary compression (by Monotype Imaging) and URL-binding (DRM) technology </li></ul><ul><li>Didn’t gain enough support </li></ul><ul><li>So… EOT Lite? Will remove URL-binding & proprietary compression? </li></ul><ul><li>Just a renamed TTF file? </li></ul>http://readableweb.com/jeffrey-zeldman-questions-the-eot-lite-web-font-format/
  17. 17. HUGE / New Browsers Font replacement <ul><li>Alternatives: The Future </li></ul><ul><li>Permissions table (proposed) </li></ul><ul><li>@font-face w/o DRM or intermediary hosted licensing, allows designer to license their work directly for web use </li></ul><ul><li>Standard for current browsers to install/remove fonts invisibly </li></ul><ul><li>Make future browsers more intelligent for @font-family </li></ul><ul><li>Proposed table can help by containing the links from which the fonts came, and determine their cacheability based on the user’s browsing history </li></ul>
  18. 18. HUGE / New Browsers Font replacement <ul><li>Solution as of today? </li></ul><ul><li>Compromise with your designer! System fonts = speed & accessibility </li></ul><ul><li>Check out the free fonts for @font-family: - http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding - http://webfonts.info/wiki/index.php?title=Commercial_foundries_which_allow_%40font-face_embedding </li></ul><ul><li>Limited sIFR use </li></ul>