Zach’s ugly mug (his face) Zach Leat­herman

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