web font replacement
DESCRIPTION
TRANSCRIPT
04/10/23HUGE / ParentsConnect / 1
HUGE45 Main Street, 2nd Floor NY NY 11201718.625.4843 www.hugeinc.com
Font replacement
Fonts for the web
August 11th, 2009
HUGE / New Browsers 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
Font replacement
HUGE / New Browsers 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;}
Font replacement
HUGE / New Browsers 4
Methods: @font-face
Cons
• Licensing, licensing, licensing!
• Limited compatibility
Font replacement
https://developer.mozilla.org/index.php?title=En/CSS/%40font-face
HUGE / New Browsers 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)
Font replacement
HUGE / New Browsers 6
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
HUGE / New Browsers 7
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
HUGE / New Browsers 8
Font replacement
HUGE / New Browsers 9
Font replacement
So…
sIFR – if we care about licenses Cufon – if we don’t
HUGE / New Browsers 10
Font replacement
But…
http://www.slideshare.net/paul.irish/rich-typography-options-for-the-web
HUGE / New Browsers 11
Font replacement
Alternatives: what else is there?
• TypeKit
• FONTSMACK
• The Future – Discussions from Typecon 2009
HUGE / New Browsers 12
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?
HUGE / New Browsers 13
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?
HUGE / New Browsers 14
Font replacement
Alternatives: The Future
Web font services
• TypeKit - TBD
• Fontdeck - TBD
• Kernest!!! - $15/year/website
HUGE / New Browsers 15
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
HUGE / New Browsers 16
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/
HUGE / New Browsers 17
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
HUGE / New Browsers 18
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