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

Bulletproof Font Icons

Bulletproof Font Icons

Originally presented at CSSConf 2014: http://2014.cssconf.com/#zach

E1899004c71c7043343196103e210be3?s=128

zachleat

May 27, 2014
Tweet

Transcript

  1. N Bulletproof C E U R N

  2. LET’S LEARN EVERYTHING ABOUT @FONT-FACE

  3. @zachleat zachleat.com

  4. None
  5. If you wish to make a font icon from scratch,

    you must first invent the universe. —Carl Sagan, probably https://www.flickr.com/photos/scott-s_photos/11763686274 “ ”
  6. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING.. . .. .
  7. 1997 @font-­‐face

  8. 1995 <font>

  9. None
  10. @font-­‐face

  11. CSS3 CSS2.1 CSS2

  12. @font-­‐face  {   !   font-­‐family:  The  Font  that  Could;

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

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

        src:url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   ! }
  15. David Hasselwoff USE WOFF

  16. Woff caniuse.com 5.0! 6.0 7.0! 7.5!

  17. WOFF BY ONE ERROR

  18. Woff + TTF caniuse.com 5.0! 6.0 7.0! 7.5!

  19. NEED IE8? Add EOT

  20. @font-­‐face  {   !   font-­‐family:  The  Font  that  Could;

        src:url('icanfont.eot?#iefix')           format('embedded-­‐opentype'),         url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   ! }
  21. Woff + TTF + EOT caniuse.com 5.0! 6.0 7.0! 7.5!

  22. NEED Chrome + Windows? Add SVG http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

  23. 34 8.1 WOFF SVG ISSU E XP

  24. Woff + EOT + TTF + SVG https://code.google.com/p/chromium/issues/detail?id=137692 caniuse.com 5.0

    7.0! 7.5! 6.0 6.0
  25. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:url('icanfont.eot?#iefix')           format('embedded-­‐opentype'),         url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff'),         url('icanfont.svg#icanfont')           format('svg');     font-­‐weight:  normal;     font-­‐style:  normal;   } W R O N G
  26. @media  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)  {   !   @font-­‐face  {    

      font-­‐family:  The  Font  That  Could;       src:  url('icanfont.svg#icomoon')           format('svg');       font-­‐weight:  normal;       font-­‐style:  normal;     }   ! }
  27. https://github.com/scottjehl/Device-Bugs/issues/43 ISSU E

  28. None
  29. @media  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)     and  (min-­‐resolution:  .001dpcm)  {   !

      @font-­‐face  {       font-­‐family:  The  Font  That  Could;       src:  url('icanfont.svg#icomoon')           format('svg');       font-­‐weight:  normal;       font-­‐style:  normal;     }   ! }
  30. Supports   -­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio Supports   min-­‐resolution Yes No Yes No

  31. Woff + EOT + TTF + SVG https://code.google.com/p/chromium/issues/detail?id=137692 caniuse.com 5.0

    7.0! 7.5! 6.0 6.0
  32. WHEW.

  33. A QUICK REVIEW

  34. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:url('icanfont.eot?#iefix')           format('embedded-­‐opentype'),         url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   }   ! @media  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)     and  (min-­‐resolution:  .001dpcm)  {   !   @font-­‐face  {       font-­‐family:  The  Font  That  Could;       src:  url('icanfont.svg#icomoon')           format('svg');       font-­‐weight:  normal;       font-­‐style:  normal;     }   }
  35. @font-­‐face  {     font-­‐family:  The  Font  that  Could;  

      src:url('icanfont.eot?#iefix')           format('embedded-­‐opentype'),         url('icanfont.ttf')           format('truetype'),         url('icanfont.woff')           format('woff');     font-­‐weight:  normal;     font-­‐style:  normal;   }   ! @media  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:0)     and  (min-­‐resolution:  .001dpcm)  {   !   @font-­‐face  {       font-­‐family:  The  Font  That  Could;       src:  url('icanfont.svg#icomoon')           format('svg');       font-­‐weight:  normal;       font-­‐style:  normal;     }   } REMOVE AFTER CHROME DIRECTWRITE
  36. GO TO YOUR HAPPY PLACE

  37. LET’s PUT THE @FONT-FACE BLOCK ON OUR WEB PAGE

  38. None
  39. NO FONT-FAMILY NO DOWNLOAD

  40. 34 28 9, 10, 11 20 6.1, 7 2.3, 4.1

    7 8
  41. body  {     font-­‐family:  My  Icon  Font,  serif;  

    }
  42. var  b  =  document.body;   ! b.style.fontFamily  =  "My  Icon

     Font";
  43. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING…
  44. BASIC LATIN CODE POINT Arial Chunk Five x41 A A

    x42 B B x43 C C x44 D D x45 E E
  45. Higher UNICODE Ranges x2261 ≡ x2605 ˒ x2665 ♥ x2713

  46. Arial Chunk Five 0x1F300 0x1F302 0x1F350 Arial Chunk Five 0x1F300

    0x1F302 0x1F350 EMOJI http://doeschromesupportemojiyet.com/ https://code.google.com/p/chromium/issues/detail?id=62435
  47. None
  48. CONSISTENCY

  49. unicode.johnholtripley.co.uk

  50. None
  51. READ AS x2261 ≡ IDENTICAL TO x2605 ˒ BLACK STAR

    or STAR x2665 ♥ HEART SUIT ACCESSIBILITY
  52. None
  53. PRIVATE USE AREA

  54. YOUR ICON FONT HERE 0xe001 0xe002 0xe003 0xe004 PRIVATE USE

    AREA
  55. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING…
  56. https://www.flickr.com/photos/79157069@N03/11616536203/ OUR @FONT-FACE REQUEST LEAVES THE NEST

  57. LOCAL FONT { @FONT-FACE {

  58. None
  59. FOIT Flash of Invisible Text

  60. @FONT-FACE LOAD

  61. https://twitter.com/aanand/status/465182499577286656

  62. LOCAL FONT { @FONT-FACE {

  63. FOUT Flash of UNSTYLED Text

  64. 3 S @FONT-FACE LOAD ABCDEFGH ABCDEFGH

  65. 3 S @FONT-FACE LOAD

  66. https://twitter.com/raganwald/status/452092613529567233 Screenshot of GitHub

  67. LOCAL FONT { @FONT-FACE {

  68. Timeouts/CURFEWS 34 > 60 s 36 28 9, 10, 11

    N/A 20 > 60 s 3 s 3 s 7 60 s 4.1 > 60 s * 6 > 60 s 60 s* 7
  69. if font loads after 60 seconds SAFARI IGNORES IT 7

    *Timeout ISSU E 7
  70. WHAT HAPPENS WHEN A USER HITS THE STOP BUTTON?

  71. LOCAL FONT { @FONT-FACE { ISSU E

  72. None
  73. @Font-face THIS ONE WEIRD TRICK A G EN D A

    CAT FANCY UNICODE LOADING…
  74. LET’S FIX EVERYTHING

  75. DECORATIVE ICON U SE C A SE

  76. <span  class="twitter  icon"     aria-­‐hidden="true"></span>   Share  on  Twitter

  77. <span  class="twitter  icon"     aria-­‐hidden="true"></span>   Share  on  Twitter

  78. FILAMENTGROUP/A-Font-Garde https://github.com/filamentgroup/a-font-garde

  79. FontFaceOnload(  "My  Icon  Font",     {      

    glyphs:  "\uE600\uE601\uE602\uE605",       success:  function()  {         var  docEl  =  document.documentElement;         docEl.className  +=  "  my-­‐icon-­‐font";       }     }); // requires http://filamentgroup.github.io/a-font-garde/src/fontfaceonload.js
  80. /*  @font-­‐face  omitted  */   ! .my-­‐icon-­‐font  .icon-­‐twitter:before  {  

      font-­‐family:  My  Icon  Font;     content:  "\e600";   }
  81. typekit/webfontloader https://github.com/typekit/webfontloader

  82. CSS Font Loading Module Level 3 http://dev.w3.org/csswg/css-font-loading/

  83. document.fonts.load("1em  My  Icon  Font")     .then(function()  {   !

        var  docEl  =  document.documentElement;       docEl.className  +=  "  my-­‐icon-­‐font";   !   });
  84. BRAMSTEIN/FONTLOADER https://github.com/bramstein/fontloader FOLLOW HE’S WORKING ON A POLYFILL. https://twitter.com/bram_stein/status/465560158723395584

  85. my-­‐icon-­‐font   SOLVES OUR PROBLEMS

  86. WE NOW CONTROL FOIT & FOUT

  87. NO MORE UNICODE SURPRISES TIMEOUT SURPRISES STOP BUTTON SURPRISES

  88. DECORATIVE ICON 3 S @FONT-FACE LOAD FOIT FOUT

  89. @Font-face THIS ONE WEIRD TRICK A G EN D A

    LET’S GET FANCY UNICODE LOADING…
  90. LET’S GET CAT FANCY

  91. TEXT to ICON @FONT-FACE LOAD U SE C A SE

  92. <style>   .facebook  .icon  {     display:  none;  

    }   .my-­‐icon-­‐font  .facebook  .icon  {     display:  inline-­‐block;   }   .my-­‐icon-­‐font  .facebook  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   </style>   <span  class="facebook">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">Facebook</span>   </span> https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L127
  93. <style>   .facebook  .icon  {     display:  none;  

    }   .my-­‐icon-­‐font  .facebook  .icon  {     display:  inline-­‐block;   }   .my-­‐icon-­‐font  .facebook  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   </style>   <span  class="facebook">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">Facebook</span>   </span> https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L127
  94. GLYPH to ICON ≡ U SE C A SE

  95. https://twitter.com/bjankord/status/451367657493647361 Hamburger Helper

  96. Hamburger Emoji

  97. = Veggieburger

  98. – Gluten Free Hamburger https://twitter.com/brouxhaha/status/464787128334180354

  99. Facebook’s Manburger https://twitter.com/jedschmidt/status/455871778267463680

  100. Hungryman Burger

  101. @FONT-FACE LOAD GLYPH to ICON ≡

  102. <style>   .hamburger  .icon:before  {     content:  "\2261";  

      /*  Adjust  font-­‐size  and  line-­‐height  to  match  */   }   .hamburger  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   .my-­‐icon-­‐font  .hamburger  .icon:before  {     font-­‐family:  My  Icon  Font;     content:  "\e601";   !   /*  Reset  font-­‐size  and  line-­‐height  */     font-­‐size:  inherit;     line-­‐height:  inherit;   }   </style>   <span  class="hamburger">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">Menu</span>   </span>
  103. <style>   .hamburger  .icon:before  {     content:  "\2261";  

      /*  Adjust  font-­‐size  and  line-­‐height  to  match  */   }   .hamburger  .text  {     /*  Visually  hide  but  keep  for  screen  readers  */     clip:  rect(0  0  0  0);  overflow:  hidden;       position:  absolute;  height:  1px;  width:  1px;   }   .my-­‐icon-­‐font  .hamburger  .icon:before  {     font-­‐family:  My  Icon  Font;     content:  "\e601";   !   /*  Reset  font-­‐size  and  line-­‐height  */     font-­‐size:  inherit;     line-­‐height:  inherit;   }   </style>   <span  class="hamburger">     <span  class="icon"  aria-­‐hidden="true"></span>     <span  class="text">Menu</span>   </span>   <span  class="icon"  aria-­‐hidden="true"></span>  
  104. @Font-face THIS ONE WEIRD TRICK A G EN D A

    LET’S GET FANCY UNICODE LOADING…
  105. Different GOALS FOR CONTENT ICONFONTS CONTENT ICON

  106. @zachleat Thank you!