Bulletproof Font Icons

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

Transcript

1. N Bulletproof C E U R N
2. LET’S LEARN EVERYTHING ABOUT @FONT-FACE
3. @zachleat zachleat.com
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>
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
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
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
48. CONSISTENCY
49. unicode.johnholtripley.co.uk
51. READ AS x2261 ≡ IDENTICAL TO x2605 ˒ BLACK STAR or STAR x2665 ♥ HEART SUIT ACCESSIBILITY
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 {
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
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!