1.
Web FontsWeb Fonts

2.
Broad Discussion Outline
 Business driver
 Technology
 Distribution Mechanisms and Licensing
 Performance Impact (Perceived and otherwise)
 Useful Tools
 State-of-art / Best Practices

3.
Business Driver
 OEM demands for approved typefaces
 Lexus, Hyundai
 Needs to be brought in as an ”Opt-in” product feature
 Any others... ?

4.
Technology
 CSS feature: font-face
 Support for this dates back to IE4 !
 All modern browsers support it, But...
 Different formats- PFR, TTF, OTF, EOT, WOFF, SVG

5.
Technology
 CSS feature: font-face
 Support for this dates back to IE4 !
 All modern browsers support it, But...
 Different formats- PFR, TTF, OTF, EOT, WOFF, SVG

6.
Technology
 CSS feature: font-face
 Support for this dates back to IE4 !
 All modern browsers support it, But...
 Different formats- PFR, TTF, OTF, EOT, WOFF, SVG

7.
Technology
 CSS feature: font-face
 Support for this dates back to IE4 !
 All modern browsers support it, But...
 Different formats- PFR, TTF, OTF, EOT, WOFF, SVG

8.
Distribution Mechanisms and Licensing
 Essentially hosted and refered through its URL
 Minor variants
 MLM-hosted (out of reach of release cycles)
 CDN
 Cobalt's Akamai (release cycle)
 3rd Party (Google etc.)
 Broadly two different licensing categories
 Commercial – Typekit, Kernest, Typotheque, Fontshop,
FontSpring, ...
 Free – Google WebFonts, Font Squirrel, FontForge,
WebFontLoader

9.
Performance Impact
 At-least one extra http request needed to load the font file
 In case of cross-domain, we need an extra stylesheet as a work-
around. OR we need CORS header
 Fonts need to be served gzipped (all formats except WOFF coz WOFF
is already compressed)
 Fonts need to be served with a ”Far Future” Expires header
 Loading of fonts can be blocking in IE
 Also impacts page-perceived performance
 There should be merit in using a CobaltFontLoader
 What happens when response status is 4xx|5xx
 FOUT is definitely better than a slow blank page

10.
Useful Tools
 Font Optimizer – strips off unnecessary characters from font file
 Google Web Fonts API supports ”subset”
 WEFT (tool that supports EOT compression by MS)
 EOTFAST is supposedly better
 Web Font Loader
 TTF/OTF to WOFF conversion tool

11.
State-of-art / Best Practices
 Performance considerations
 Delivering over a CDN is always faster
 Cache, Cache, Cache
 Compress
 Subset
 Use RESTish way of versioning – never invalidate existing
cache
 Browsers following Webkit method of timed blanking rather than FOUT
 Font Loaders
 Web Font Loader is the most comprehensive