Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web fonts

534 views

Published on

Published in: Technology, Art & Photos
  • Login to see the comments

  • Be the first to like this

Web fonts

  1. 1.    Web FontsWeb Fonts
  2. 2.    Broad Discussion Outline  Business driver  Technology  Distribution Mechanisms and Licensing  Performance Impact (Perceived and otherwise)  Useful Tools  State-of-art / Best Practices
  3. 3.    Business Driver  OEM demands for approved typefaces  Lexus, Hyundai  Needs to be brought in as an ”Opt-in” product feature  Any others... ?
  4. 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. 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. 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. 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. 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. 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. 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. 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

×