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

Bulletproof Font Icons

E1899004c71c7043343196103e210be3?s=47 zachleat
May 27, 2014
Programming
19
2k

Bulletproof Font Icons

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

E1899004c71c7043343196103e210be3?s=128

zachleat

May 27, 2014
Tweet

More Decks by zachleat

See All by zachleat
NEJS CONF 2017 Interstitial Slides
E1899004c71c7043343196103e210be3?s=48 zachleat
0
93
Credibility
E1899004c71c7043343196103e210be3?s=48 zachleat
0
44
A Brief History of that Time You Used Web Fonts
E1899004c71c7043343196103e210be3?s=48 zachleat
7
1.2k
The Performance and Usability of Font Loading (Velocity NYC 2015)
E1899004c71c7043343196103e210be3?s=48 zachleat
3
390
The Performance and Usability of Font Loading (Velocity Santa Clara 2015)
E1899004c71c7043343196103e210be3?s=48 zachleat
27
3.8k
Performance and Responsive Web Design
E1899004c71c7043343196103e210be3?s=48 zachleat
7
920
Remodeling @font-face
E1899004c71c7043343196103e210be3?s=48 zachleat
17
2.8k
How and Why I Built fontfamily.io
E1899004c71c7043343196103e210be3?s=48 zachleat
2
670
Impostor Syndrome
E1899004c71c7043343196103e210be3?s=48 zachleat
1
260

Other Decks in Programming

See All in Programming
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
1f1d874ed952074278d27fad3fb870b8?s=48 microcms
0
460
Groovy Roadmap
4578d99b560b2a470e05288ef6766ac2?s=48 paulk
7
13k
About Type Syntax Proposal
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
1
990
TechFeed Conference 2022 - Kotlin Experimental
D4133d8efb46ae872d7a563b619bfc83?s=48 jmatsu
0
620
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
87980686562669ac5ec4617ca53047f9?s=48 tacke_jp
2
180
Nix for Scala folks
08f642741fba006656cb86fb61c160b3?s=48 kubukoz
0
120
mrubyを1300円のボードで動かそう
9ec05c5a1b9b0ce9cd53ec3a63838b9a?s=48 yuuu
0
180
バンドル最適化マニアクス at tfconf
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
3
2k
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
290
Unity Localization で多言語対応実装しよう / xrdnk-yokohamaunity-lt10-20220513
270b0c7883545117a9a618dc7ca7cc83?s=48 xrdnk
0
100
Node.js 最新動向 TFCon 2022
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
6
2.7k
Securing Kafka Connect Pipelines with Client-Side Field Level Cryptography @ Kafka Summit London 2022
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
310

Featured

See All Featured
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
Fireside Chat
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
11
1.2k
Scaling GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
2.9k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
Gamification - CAS2011
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.9k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
33k
Design by the Numbers
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
271
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
151
12k
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
130
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
19
1.4k

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!