Web Font Replacement

  • 1,587 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,587
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
19
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