Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Brief History of that Time You Used Web Fonts

zachleat
October 21, 2015

A Brief History of that Time You Used Web Fonts

A talk given for SmashingConf Barcelona 2015.

http://smashingconf.com/barcelona-2015/speakers/zach-leatherman

zachleat

October 21, 2015
Tweet

More Decks by zachleat

Other Decks in Programming

Transcript

  1. IN THE BEGINNING 4,500,000,000 Years Ago VERDANA GEORGIA COURIER NEW

    TIMES NEW ROMAN IMPACT COMIC SANS MS THERE WAS ARIAL IN 1995
  2. IMG

  3. CSS

  4. IS 30% SMALLER THAN WOFF On average across all of

    Google Fonts: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/j27Ou4RtvQI/discussion WOFF2
  5. @font-­‐face  {    font-­‐family:  Open  Sans;    src:  url('opensans.woff2')  format('woff2'),

             url('opensans.woff')  format('woff'),          url('opensans.otf')  format('opentype');   }
  6. <!doctype  html>   <style>   @font-­‐face  {    font-­‐family:  Open

     Sans;    src:  url('opensans.woff2')  format('woff2'),          url('opensans.woff')  format('woff');   }   </style>  
  7. @font-­‐face  {      font-­‐family:  Ampersand;      src:  url('ampersand.woff2')

     format('woff2'),                url('ampersand.woff')  format('woff');      unicode-­‐range:  U+26;   } unicode- range
  8. unicode- range 36 9+ 23 8+ 2.1+ 8+ Supported Supported

    with SMART DOWNLOAD NOT SUPPORTED
  9. EXACT MATCH ON Font-Family USED ON AN ELEMENT IN THE

    DOCUMENT ✔ ✔ @FONT-FACE DOWNLOAD CHECKLIST
  10. EXACT MATCH ON Font-Family USED ON AN ELEMENT IN THE

    DOCUMENT ELEMENT HAS CONTENT ✔ ✔ @FONT-FACE DOWNLOAD CHECKLIST ✔
  11. EXACT MATCH ON Font-Family USED ON AN ELEMENT IN THE

    DOCUMENT ELEMENT HAS CONTENT CONTENT IS WITHIN UNICODE-RANGE ✔ ✔ @FONT-FACE DOWNLOAD CHECKLIST ✔ ✔
  12. @font-­‐face  {      font-­‐family:  My  Web  Font;    

     font-­‐weight:  400;      font-­‐style:  normal;   } p  {      font-­‐family:  My  Web  Font;      font-­‐weight:  400;      font-­‐style:  normal;   } ✔
  13. @font-­‐face  {      font-­‐family:  My  Web  Font;    

     font-­‐weight:  600;   } p  {      font-­‐family:  My  Web  Font;      font-­‐weight:  100;   } ✘
  14. MisMatch weight 600 Available, 100 assigned, FORCED BOLD p  {

         font-­‐family:  My  Web  Font;      font-­‐weight:  100;   } @font-­‐face  {      font-­‐family:  My  Web  Font;      font-­‐weight:  600;   } ✘ ✘ ✔ ✔
  15. MISMATCH STYLE ITALIC AVAILABLE, NORMAL ASSIGNED, FORCED ITALIC p  {

         font-­‐family:  My  Web  Font;      font-­‐style:  normal;   } @font-­‐face  {      font-­‐family:  My  Web  Font;      font-­‐style:  italic;   } ✘ ✘ ✔ ✔
  16. 100  200  300  400  500  600  700  800  900 FONT-WEIGHT

    <p> ‐ ‐ Normal/Roman Bold @font-­‐face ‑
  17. @font-­‐face  {      font-­‐family:  My  Web  Font;    

     font-­‐weight:  500;   } p  {      font-­‐family:  My  Web  Font;      font-­‐weight:  600;   } ✘
  18. FAUX BOLD p  {      font-­‐family:  My  Web  Font;

         font-­‐weight:  600;   } @font-­‐face  {      font-­‐family:  My  Web  Font;      font-­‐weight:  500;   }
  19. FAUX ITALIC p  {      font-­‐family:  My  Web  Font;

         font-­‐style:  italic;   } @font-­‐face  {      font-­‐family:  My  Web  Font;      font-­‐style:  normal;   }
  20. <style>   @font-­‐face  {      font-­‐weight:  400;    

     font-­‐style:  normal;   }   </style>   <p>      Roman  Text      <strong>Bold  Text</strong>      <em>Italic  Text</em>   </p>
  21. <i>

  22. People will visit a Web site less often if it

    is slower than a close competitor by more than 250 milliseconds.” http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html “
  23. <style>   h1  {  font-­‐family:  serif;  }   .loaded  h1

     {  font-­‐family:  My  Web  Font;  }   </style>   <link  href="fonts.css"   onload="document.body.className+='   loaded';"  rel="stylesheet">   A N TI-PA TTER N
  24. @font-­‐face  {      font-­‐family:  My  Web  Font;    

     src:  url('data:application/x-­‐font-­‐ woff;charset=utf-­‐8;base64,...')  format('woff');   }   @font-­‐face  {      font-­‐family:  My  Web  Font;      src:  url('data:application/x-­‐font-­‐ woff;charset=utf-­‐8;base64,...')  format('woff');      font-­‐weight:  700;   } A N TI-PA TTER N
  25. READ AS x2261 ≡ IDENTICAL TO x2605 ★ BLACK STAR

    or STAR x2665 ♥ HEART SUIT ACCESSIBILITY A N TI-PA TTER N
  26. @font-­‐face  {      font-­‐family:  Open  Sans;      /*

     full  FOUT  */      font-­‐display:  swap;   }
  27. @font-­‐face  {      font-­‐family:  Open  Sans;      /*

     100ms  maximum  FOIT  */      /*  Do  not  repaint  after  3s  */      font-­‐display:  fallback;   }
  28. @font-­‐face  {      font-­‐family:  Open  Sans;      /*

     100ms  maximum  FOIT  */      /*  never  FOUT  */      /*  if  not  in  cache,  use  fallback  */      font-­‐display:  optional;   }
  29. FONTFACEONLOAD github.com/zachleat/fontfaceonload USES THE CSS FONT LOADING API WHEN AVAILABLE.

    FONTFACEOBSERVER github.com/bramstein/fontfaceobserver/ INCLUDES A NICE PROMISES POLYFILL
  30. var  doc  =  document,          docEl  =

     doc.documentElement;   doc.fonts.load("1em  Raleway")    .then(function()  {          //  The  font  has  loaded.      docEl.className  +=  "  raleway-­‐loaded";    });
  31. body  {      font-­‐family:  sans-­‐serif;   }   .raleway-­‐loaded

     body  {      font-­‐family:  Raleway,  sans-­‐serif;   }
  32. Promise.all([      document.fonts.load("400  1em  Raleway"),      document.fonts.load("700  1em

     Raleway")   ]).then(function  ()  {      docEl.className  +=  "  raleway-­‐loaded";   }); ‑ document.fonts.load("1em  Raleway").then(function()  {      docEl.className  +=  "  raleway-­‐loaded";   }); BECOMES