This document discusses web fonts, including the business drivers for using them, the supporting technologies, distribution mechanisms and licensing options, performance impacts, useful tools, and best practices. It notes that web fonts allow approved typefaces from companies and are brought in as an opt-in feature. While the <font-face> CSS feature has existed since IE4, different formats like TTF, OTF, EOT, WOFF and SVG require support. Distribution includes hosting on websites, CDNs, or third-party services, while licensing models include commercial and free options. Performance impacts include additional HTTP requests, blocking rendering, and perceived slowness. Tools aid optimization, subsetting, and conversion between formats. Caching, compression,

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