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

    1. 2020

      ×1 Sparkline representing frequency of posts written by month in 2020
    2. Speaker Spotlight: a chat with Vitaly Friedman 19 min

    1. 2019

      ×8 Sparkline representing frequency of posts written by month in 2019
    2. HTTP Archive’s Web Almanac 2019—Web Fonts Edition IndieWeb Avatar for https://almanac.httparchive.org/en/2019/fonts
    3. Developing a Robust Font Loading Strategy for CSS-Tricks #1823k 89
    4. Smashing TV: The Five Whys of Web Font Loading PerformanceTalk
    5. Spicy fonts and static sites 🌶️—JS Party #79 IndieWeb Avatar for https://changelog.com/jsparty/79 67 min
    6. font-display is Incompatible with Icon Fonts 9k 41
    7. Speaking at: Web Engineering Düsseldorf IndieWeb Avatar for https://www.meetup.com/Web-Engineering-Duesseldorf/events/260995020/
    8. The Scoville Scale of Web Font Loading OpinionsConf Talk 1k 3
    9. Google Fonts is Adding font-display 🎉 IndieWeb Avatar for https://fonts.google.com/#847k 57

    1. 2018

      ×11 Sparkline representing frequency of posts written by month in 2018
    2. Working Draft Podcast: On Tour @ #perfnow 5/6 IndieWeb Avatar for https://workingdraft.de/on-tour-perfnow-zach-leatherman/ 21 min
    3. Should I Use JavaScript to Load My Web Fonts? IndieWeb Avatar for https://www.filamentgroup.com/lab/js-web-fonts.html
    4. The Five Whys of Web Font Loading PerformanceConf Talk 46 min4k 4
    5. A Group of Web Font Repaints is called a Michael Serif
    6. The Problem with font-display and Reflow 5k 23
    7. The Font Loading Checklist #1925k 10
    8. Obnoxiously Readable Responsive Text with Viewport Units 5k 1
    9. preload with font-display: optional is an Anti-pattern 4k 27
    10. “The Compromise”—a Modern but Compatible Font Loading Strategy 4k 26
    11. It’s Dangerous to Go Stallone. Take Glyphhanger 6k 10
    12. Web Fonts are ▢▢▢ Rocket ScienceConf Talk IndieWeb Avatar for https://www.filamentgroup.com/lab/rocket-science.html 47 min

    1. 2017

      ×11 Sparkline representing frequency of posts written by month in 2017
    2. 23 Minutes of Work for Better Font Loading #1619k 26
    3. Managing Font Loading CSS Was Painful—Not Anymore 5k
    4. A Collection of Web Font Loading Recipes 3k1
    5. FOIT vs. FOUT, a Side by Side Comparison 13k 6
    6. A Historical Look at FOUT and FOIT 4k 27
    7. Web Standards Podcast #85 86 min
    8. The Web Font Loading Glossary 15k 3
    9. Font Aliasing, or How to Rename a Font in CSS 16k 79
    10. Laissez-faire Font Smoothing and Anti-aliasing #2017k 57
    11. CSS-Tricks Video Screencasts #152: Font Loading IndieWeb Avatar for https://css-tricks.com/video-screencasts/152-font-loading-zach-leatherman/ 57 min
    12. Shop Talk Show #247: The Performance Equation IndieWeb Avatar for http://shoptalkshow.com/episodes/247-performance-equation/ 72 min

    1. 2016

      ×8 Sparkline representing frequency of posts written by month in 2016
    2. No @font-face Syntax will ever be Bulletproof, Nor Should It Be. 3k 1
    3. faux-pas, Detecting Faux Web Font Rendering
    4. Lazy Loading Web Fonts Is Probably Not What You Want 6k 7
    5. A Comprehensive Guide to Font Loading Strategies #2204k 186
    6. Web Fonts for President 2016 #827k10
    7. The Web Fonts: Preloaded #729k 10
    8. Web Font Anti-pattern: Data URIs 15k 117
    9. Critical Web Fonts #1520k 7

    1. 2015

      ×9 Sparkline representing frequency of posts written by month in 2015
    2. Using Custom Fonts Responsibly, an Akamai Animated Short 5 min
    3. A Brief History of that Time You Used Web Fonts—SmashingConf BarcelonaConf Talk 48 min
    4. The Performance and Usability of Web Fonts—Velocity New York CityConf Talk 42 min 1
    5. Smashing Book #5
    6. The Mitt Romney Web Font Problem 9k 78
    7. The Performance and Usability of Font Loading—Velocity Santa ClaraConf Talk 39 min1k1
    8. Better @font-face with Font Load Events—SmashingConf WhistlerConf Talk 48 min
    9. Flash of Faux Text—still more on Font Loading #1322k 2
    10. How we use web fonts responsibly, or, avoiding a @font-face-palm IndieWeb Avatar for http://www.filamentgroup.com/lab/font-loading.html

    1. 2014

      ×6 Sparkline representing frequency of posts written by month in 2014
    2. The Making of Font Family ReunionMeetup Talk 19 min
    3. WOFF2 See the Wizard, a Wonderful JavaScript Feature Test IndieWeb Avatar for http://www.filamentgroup.com/lab/woff2.html
    4. A Font Family Reunion 8k 116
    5. Better @font-face with Font Load Events on Dev.Opera IndieWeb Avatar for https://dev.opera.com/articles/better-font-face/
    6. Bulletproof Icon Fonts—CSSConfConf Talk 26 min
    7. Bulletproof Accessible Icon Fonts IndieWeb Avatar for http://www.filamentgroup.com/lab/bulletproof_icon_fonts.html

    1. 2011

      ×2 Sparkline representing frequency of posts written by month in 2011
    2. FitText + BigText: A Tale of Two Plugins #631k6
    3. BigText Makes Text Big #6167k 376

    1. 2010

      ×3 Sparkline representing frequency of posts written by month in 2010
    2. Point, Charset, Match: Character Encoding in JavaScript 14k 1
    3. CSS 3 Text: A Tale of writing-mode Woe #1920k3
    4. DIY Webdings—CSS Sprites using @font-face 10k26