Zach’s ugly mug (his face) Zach Leatherman

An Unhealthy Obsession with Web Fonts & Type

A list of 61 posts and projects dealing with web fonts, web font loading, or typography.

  1. 2021 Sparkline representing frequency of posts written by month in 2021 ×2
  2. Uniclode: yet another demo of Eleventy Serverless 22
  3. Unicode Range Interchange 21
  4. 2020 Sparkline representing frequency of posts written by month in 2020 ×1
  5. Speaker Spotlight: a chat with Vitaly Friedman 19 min Video
  6. 2019 Sparkline representing frequency of posts written by month in 2019 ×8
  7. IndieWeb Avatar for https://almanac.httparchive.org/en/2019/fontsHTTP Archive’s Web Almanac 2019—Web Fonts Edition
  8. Developing a Robust Font Loading Strategy for CSS-Tricks #15#11168
  9. Smashing TV: The Five Whys of Web Font Loading Performance
  10. IndieWeb Avatar for https://changelog.com/jsparty/79Spicy fonts and static sites 🌶️—JS Party #79 67 min Audio
  11. font-display is Incompatible with Icon Fonts 108
  12. IndieWeb Avatar for https://www.meetup.com/Web-Engineering-Duesseldorf/events/260995020/Web Engineering Düsseldorf
  13. The Scoville Scale of Web Font Loading Opinions 30
  14. Google Fonts is Adding font-display 🎉 #7#4123
  15. 2018 Sparkline representing frequency of posts written by month in 2018 ×11
  16. IndieWeb Avatar for https://workingdraft.de/on-tour-perfnow-zach-leatherman/Working Draft Podcast: On Tour @ #perfnow 5/6 21 min Audio
  17. IndieWeb Avatar for https://www.filamentgroup.com/lab/js-web-fonts.htmlShould I Use JavaScript to Load My Web Fonts?
  18. The Five Whys of Web Font Loading Performance 46 min Video5
  19. A Group of Web Font Repaints is called a Michael Serif
  20. The Problem with font-display and Reflow 23
  21. The Font Loading Checklist #16#1023
  22. Obnoxiously Readable Responsive Text with Viewport Units 1
  23. preload with font-display: optional is an Anti-pattern 27
  24. “The Compromise”—a Modern but Compatible Font Loading Strategy 33
  25. It’s Dangerous to Go Stallone. Take Glyphhanger 13
  26. IndieWeb Avatar for https://www.filamentgroup.com/lab/rocket-science.htmlWeb Fonts are ▢▢▢ Rocket Science 47 min Video
  27. 2017 Sparkline representing frequency of posts written by month in 2017 ×11
  28. 23 Minutes of Work for Better Font Loading #1641
  29. Managing Font Loading CSS Was Painful—Not Anymore
  30. A Collection of Web Font Loading Recipes 1
  31. FOIT vs. FOUT, a Side by Side Comparison 13
  32. A Historical Look at FOUT and FOIT 112
  33. Web Standards Podcast #85 86 min Audio
  34. The Web Font Loading Glossary 4
  35. Font Aliasing, or How to Rename a Font in CSS 16
  36. Laissez-faire Font Smoothing and Anti-aliasing #2016
  37. IndieWeb Avatar for https://css-tricks.com/video-screencasts/152-font-loading-zach-leatherman/CSS-Tricks Video Screencasts #152: Font Loading 57 min Video
  38. IndieWeb Avatar for http://shoptalkshow.com/episodes/247-performance-equation/Shop Talk Show #247: The Performance Equation 72 min Audio
  39. 2016 Sparkline representing frequency of posts written by month in 2016 ×8
  40. No @font-face Syntax will ever be Bulletproof, Nor Should It Be. 1
  41. faux-pas, Detecting Faux Web Font Rendering
  42. Lazy Loading Web Fonts Is Probably Not What You Want 8
  43. A Comprehensive Guide to Font Loading Strategies #1#1264
  44. Web Fonts for President 2016 #810
  45. The Web Fonts: Preloaded #713
  46. Web Font Anti-pattern: Data URIs 18
  47. Critical Web Fonts #157
  48. 2015 Sparkline representing frequency of posts written by month in 2015 ×9
  49. Using Custom Fonts Responsibly, an Akamai Animated Short 5 min Video
  50. A Brief History of that Time You Used Web Fonts—SmashingConf Barcelona 48 min Video
  51. The Performance and Usability of Web Fonts—Velocity New York City 42 min Video2
  52. Smashing Book #5
  53. The Mitt Romney Web Font Problem 12
  54. The Performance and Usability of Font Loading—Velocity Santa Clara 39 min Video1
  55. Better @font-face with Font Load Events—SmashingConf Whistler 48 min Video
  56. Flash of Faux Text—still more on Font Loading #123
  57. IndieWeb Avatar for http://www.filamentgroup.com/lab/font-loading.htmlHow we use web fonts responsibly, or, avoiding a @font-face-palm
  58. 2014 Sparkline representing frequency of posts written by month in 2014 ×6
  59. The Making of fontfamily.io 19 min Video
  60. IndieWeb Avatar for http://www.filamentgroup.com/lab/woff2.htmlWOFF2 See the Wizard, a Wonderful JavaScript Feature Test
  61. A Font Family Reunion 12
  62. IndieWeb Avatar for https://dev.opera.com/articles/better-font-face/Better @font-face with Font Load Events on Dev.Opera
  63. Bulletproof Icon Fonts—CSSConf 26 min Video
  64. IndieWeb Avatar for http://www.filamentgroup.com/lab/bulletproof_icon_fonts.htmlBulletproof Accessible Icon Fonts
  65. 2011 Sparkline representing frequency of posts written by month in 2011 ×2
  66. FitText + BigText: A Tale of Two Plugins #66
  67. BigText Makes Text Big #4#281
  68. 2010 Sparkline representing frequency of posts written by month in 2010 ×3
  69. Point, Charset, Match: Character Encoding in JavaScript 2
  70. CSS 3 Text: A Tale of writing-mode Woe #173
  71. DIY Webdings—CSS Sprites using @font-face 39