1. The document discusses various methods for replacing fonts on webpages, including @font-face, sIFR, Cufon, and others. 2. It notes the pros and cons of each method in terms of licensing issues, compatibility, text selection ability, and load times. 3. Alternative future options are presented, such as TypeKit and web font services, but many require compromises or are not fully ready yet. Compromise with designers is suggested for now.

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. The problem: We need to support our designers and know what we can and shouldn’t compromise CSS image replacement is tiring and not always the best solution HUGE / New Browsers Font replacement

3. Methods: @font-face Pros CSS awesome and easy @font-face { font-family:"Fontin Sans"; src: url("FontinSansR.ttf"); } h1 {font-family:”Fontin Sans", "Trebuchet MS", sans-serif;} HUGE / New Browsers Font replacement

4. Methods: @font-face Cons Licensing, licensing, licensing! Limited compatibility HUGE / New Browsers Font replacement https://developer.mozilla.org/index.php?title=En/CSS/%40font-face

5. Methods: sIFR (Javascript, Flash) Pros Non-intrusive scripting Good type handling Degrades well Legal since font is contained in the SWF object Text is selectable Cons Requires flash Sometimes load time issues FOUC (Flash of unstyled content) HUGE / New Browsers Font replacement

6. HUGE / New Browsers Font replacement Methods: Facelift, aka FLIR (Javascript, PHP) Pros Easy to configure Legal since font is rendered as an image Cons Requires PHP and the GD library Can’t select the text Type not always rendered to precision Requires additional server resources to process

7. HUGE / New Browsers Font replacement Methods: Cufon (Javscript, Canvas, VML) FontForge script converts font file to SVG font. SVG font converted to VML paths, then converted to JSON Pros Easy to configure Has best load time performance Supports .otf and .ttf files Cons Selecting text is difficult “ 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

8. HUGE / New Browsers Font replacement

9. HUGE / New Browsers Font replacement So… sIFR – if we care about licenses Cufon – if we don’t

10. HUGE / New Browsers Font replacement But… http://www.slideshare.net/paul.irish/rich-typography-options-for-the-web

11. HUGE / New Browsers Font replacement Alternatives: what else is there? TypeKit FONTSMACK The Future – Discussions from Typecon 2009

12. HUGE / New Browsers Font replacement Alternatives: TypeKit (Javascript, …?) Pros Doesn’t require flash Working with foundries to develop a consistent web-only font linking license Will attempt to protect Cons Not here yet! Price?

13. HUGE / New Browsers Font replacement Alternatives: FONTSMACK (Javascript, Flash) Pros Pre-generated flash SWFs for sIFR Removes dependency for Flash software Cons Website is messed up Legal issues? Removed commercial fonts… Load time performance?

14. HUGE / New Browsers Font replacement Alternatives: The Future Web font services TypeKit - TBD Fontdeck - TBD Kernest!!! - $15/year/website

15. HUGE / New Browsers Font replacement Alternatives: The Future .webfont (proposed) 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 Foundries support, but will take years

16. HUGE / New Browsers Font replacement Alternatives: The Future EOT Lite - .EOT font format (proposed) Since IE4, a font format that enables real fonts to be temporarily embedded in web pages Based on TTF and OTF, with additional information – reader can see font to view the page, but cannot download/steal the font afterwards Currently, EOT is a product of IE’s proprietary compression (by Monotype Imaging) and URL-binding (DRM) technology Didn’t gain enough support So… EOT Lite? Will remove URL-binding & proprietary compression? Just a renamed TTF file? http://readableweb.com/jeffrey-zeldman-questions-the-eot-lite-web-font-format/

17. HUGE / New Browsers Font replacement Alternatives: The Future Permissions table (proposed) @font-face w/o DRM or intermediary hosted licensing, allows designer to license their work directly for web use Standard for current browsers to install/remove fonts invisibly Make future browsers more intelligent for @font-family Proposed table can help by containing the links from which the fonts came, and determine their cacheability based on the user’s browsing history

18. HUGE / New Browsers Font replacement Solution as of today? Compromise with your designer! System fonts = speed & accessibility 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 Limited sIFR use