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

Remodeling @font-face

zachleat
December 10, 2014

Remodeling @font-face

Delivered at Smashing Conference Whistler 2014

zachleat

December 10, 2014
Tweet

More Decks by zachleat

Other Decks in Technology

Transcript

  1. MOTIVATION THIS ONE WEIRD TRICK A G EN D A

    FORMATS LOADING.. . .. . DOwNLOAD
  2. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:  url('icanfont.woff')            format('woff'),                url('icanfont.ttf')            format('truetype');   }
  3. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:    url('icanfont.woff')            format('woff'),          url('icanfont.ttf')            format('truetype');   }
  4. vs. OTF TTF AN EXTENSION TO TTF MORE TYPOGRAPHIC FEATURES:

    LIGATURES MORE UBIQUITOUS SMALLCAPS ET CETERA
  5. 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
  6. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:  url('icanfont.woff2')            format('woff2'),          url('icanfont.woff')            format('woff'),          url('icanfont.otf')            format('opentype');   }
  7. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:  url('icanfont.eot?#iefix')                    format('embedded-­‐opentype'),                url('icanfont.woff2')            format('woff2'),                url('icanfont.woff')            format('woff'),          url('icanfont.ttf')            format('truetype');   } IC O N FO N T
  8. SVG * WITH TEMPORARY EXCEPTION TO PLATFORMS STILL USING GDI

    INSTEAD OF DIRECTWRITE, LIKE WINDOWS XP and VISTA
  9. SVG FONTS REMOVED FROM SVG SPECIFICATION SVG * WITH TEMPORARY

    EXCEPTION TO PLATFORMS STILL USING GDI INSTEAD OF DIRECTWRITE, LIKE WINDOWS XP and VISTA
  10. SVG FONTS REMOVED FROM SVG SPECIFICATION SVG REMOVED FROM CHROME*

    * WITH TEMPORARY EXCEPTION TO PLATFORMS STILL USING GDI INSTEAD OF DIRECTWRITE, LIKE WINDOWS XP and VISTA
  11. SVG FONTS REMOVED FROM SVG SPECIFICATION SVG REMOVED FROM CHROME*

    * WITH TEMPORARY EXCEPTION TO PLATFORMS STILL USING GDI INSTEAD OF DIRECTWRITE, LIKE WINDOWS XP and VISTA NEVER SUPPORTED ON IE, Firefox.
  12. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:  url('icanfont.woff2')            format('woff2'),                url('icanfont.woff')            format('woff'),                url('icanfont.otf')            format('opentype'),                url('icanfont.svg#icantfont')            format('svg');   }
  13. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:  url('icanfont.woff2')            format('woff2'),                url('icanfont.woff')            format('woff'),                url('icanfont.otf')            format('opentype'),                url('icanfont.svg#icantfont')            format('svg');   }
  14. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src: }                                                url('icanfont.otf')              format('opentype'); url('icanfont.woff2')        format('woff2'),   url('icanfont.woff')        format('woff'),
  15. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src: }                                                url('icanfont.ttf')              format('truetype'); url('icanfont.woff2')        format('woff2'),   url('icanfont.woff')        format('woff'),
  16. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src: }          url('icanfont.eot?#iefix')                    format('embedded-­‐opentype'),                                                url('icanfont.otf')              format('opentype'); url('icanfont.woff2')        format('woff2'),   url('icanfont.woff')        format('woff'), IC O N FO N T
  17. 8 36 23 6.1–8 2.3, 4.1 7–8 DOWNLOADS WITH EMPTY

    ATTACHED NODE DOWNLOADS EVERY TIME DOWNLOADS WITH NON-EMPTY ATTACHED NODE 28 9–11
  18. 8 36 23 6.1–8 2.3, 4.1 7–8 DOWNLOADS WITH EMPTY

    ATTACHED NODE DOWNLOADS EVERY TIME DOWNLOADS WITH NON-EMPTY ATTACHED NODE 28 9–11
  19. /*  Does  not  download  */   var  el  =  document.createElement('div');

      el.style.fontFamily  =  'The  Font  That  Could';   /*  Initiates  download  in  Firefox,  IE  9+  */   document.body.appendChild(el);   /*  Initiates  download  in  WebKit/Blink  */   el.innerHTML  =  'Content.';
  20. BASIC LATIN CODE POINT Arial Chunk Five x26 & &

    x41 A A x42 B B x43 C C x44 D D x45 E E
  21. @font-­‐face  {     font-­‐family:  Ampersands;     src:  url('sands.woff2')

     format('woff2'),                url('sands.woff')  format('woff'),                url('sands.ttf')  format('truetype');      unicode-­‐range:  U+26;   } unicode- range
  22. unicode- range 36 9, 10, 11 23 8 4.1 8

    ALWAYS DOWNLOADS SMART DOWNLOAD NOT SUPPORTED
  23. unicode- range 36 9, 10, 11 23 8 4.1 8

    ALWAYS DOWNLOADS SMART DOWNLOAD NOT SUPPORTED
  24. SUCCESS. FOUT, 0 seconds IC O N FO N T

    equivalent to FOIT IF YOU USE THE PUA
  25. Timeouts 36 28 9–11 0 S 23 3 S 3

    s 3 s 8 > 60 s 4.1 > 60 s 6 > 60 s > 60 s 8
  26. var  doc  =  document,          docEl  =

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

     body  {      font-­‐family:  Raleway,  sans-­‐serif;   }
  28. var  docEl  =  document.documentElement;   FontFaceOnload(  "Raleway",  {    

    success:  function()  {       //  The  font  has  loaded.       docEl.className  +=  "  raleway-­‐loaded";     }   });
  29. var  doc  =  document,          docEl  =

     doc.documentElement;   FontFaceOnload(  "My  Icon  Font",     {       glyphs:  "\uE600\uE601\uE602\uE605",       success:  function()  {                //  The  font  has  loaded.         docEl.className  +=  "  icon-­‐font-­‐loaded";       }     }); IC O N FO N T
  30. .icon-­‐font-­‐loaded  .hamburger  .icon:before  {     font-­‐family:  My  Icon  Font;

        content:  "\e600";   }   .icon-­‐font-­‐loaded  .hamburger  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   } IC O N FO N T
  31. .hamburger  .text  {     /*  Visually  hide  but  keep

     for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   .hamburger  .icon:before  {     content:  "\2261";   }   .icon-­‐font-­‐loaded  .hamburger  .icon:before  {     font-­‐family:  My  Icon  Font;     content:  "\e600";   } IC O N FO N T
  32. READ AS x2261 ≡ IDENTICAL TO x2605 ★ BLACK STAR

    or STAR x2665 ♥ HEART SUIT ACCESSIBILITY IC O N FO N T