Your SlideShare is downloading. ×
Web Font Replacement
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Web Font Replacement

1,645
views

Published on

Published in: Technology, Art & Photos

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,645
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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