Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Bulletproof Font Icons

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for zachleat zachleat
May 27, 2014
Programming
3.1k
19

Bulletproof Font Icons

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

Avatar for zachleat

zachleat

May 27, 2014

More Decks by zachleat

See All by zachleat
NEJS CONF 2017 Interstitial Slides
Avatar for zachleat zachleat
0
160
Credibility
Avatar for zachleat zachleat
0
110
A Brief History of that Time You Used Web Fonts
Avatar for zachleat zachleat
7
1.5k
The Performance and Usability of Font Loading (Velocity NYC 2015)
Avatar for zachleat zachleat
3
690
The Performance and Usability of Font Loading (Velocity Santa Clara 2015)
Avatar for zachleat zachleat
27
4.8k
Performance and Responsive Web Design
Avatar for zachleat zachleat
7
2.2k
Remodeling @font-face
Avatar for zachleat zachleat
17
3.6k
How and Why I Built fontfamily.io
Avatar for zachleat zachleat
2
1.6k
Impostor Syndrome
Avatar for zachleat zachleat
1
490

Other Decks in Programming

See All in Programming
Building an Out-of-Order CPU
Avatar for Latte72 latte72
1
750
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.6k
ALB ログから Trace を気合で繋げる技術
Avatar for Hayato Kawai fohte
7
880
「AI時代、配布するPythonコードをどう守るか: 難読化の実験と判断軸」 #PyconJP2026
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
2
200
変化を抱擁するドキュメントの作り方 - ビジネスルール駆動開発がもたらす、コードとの新しい関係
Avatar for ioki ioki
2
150
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
140
From 6 People Classroom Meetup to 100 People Regional Conference / FOSS4G Hiroshima 2026
Avatar for YFurukawa furukawayasuto
0
130
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
Avatar for Sota Takaki stkk
0
110
Intent as Code
Avatar for Shoppingjaws shoppingjaws
6
930
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
Avatar for 野瀬田　裕樹 yuukiw00w
0
180
週末にAI-DLCを本気で回したら$1,600溶けた
Avatar for Atsushi Shimizu hbashimizu
0
130
Foundry Localでエージェント開発
Avatar for 瀬尾佳隆 seosoft
0
180

Featured

See All Featured
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
280
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.2k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4.3k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
It's Worth the Effort
Avatar for 3n 3n
188
29k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.9k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
310
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
A Soul's Torment
Avatar for Nat Ma seathinner
7
3.6k

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!