FOUT Reduction is a Great Agent Loop

Since I use a lot of unique fonts on my site (I love bitmap fonts!) and I have not put much effort into optimizing the page loads, I was noticing quite a bit of Flash of Unstyled Text.

Before the browser downloads your custom fonts, it will first draw the page with the system default fonts it already has available (which are platform specific). Then after it downloads your fonts, it will repaint the website. The problem is that rarely do your custom fonts match the shape and size of the defaults.

Before optimization, before the webfont loads: the fallback font causes substantial layout movement. — Beforeclick to toggle

Before optimization, after the webfont loads: the page repaints with substantial layout movement. — Beforeclick to toggle

After optimization, before the webfont loads: the metric-matched fallback prevents layout movement. — Afterclick to toggle

After optimization, after the webfont loads: the page remains stable. — Afterclick to toggle

Here is what it looks like in practice.

Custom CSS Example

   /* Custom webfont */
   @font-face {
     font-family: 'Espy Sans 12';
     src: url('/fonts/EspySansRevived-12px-Bold.woff2')
       format('woff2');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
   }

   /* Metric-matched local fallback */
   @font-face {
     font-family: 'Espy Sans 12 Matched Fallback';
     src: local('Verdana Bold');
     /* The important bits! */
     size-adjust: 106.9219%;
     ascent-override: 70.1446%;
     descent-override: 23.3815%;
     line-gap-override: 23.3815%;
     font-weight: bold;
     font-style: normal;
   }

   /* Use the adjusted fallback until Espy loads */
   :root {
     --font-espy-12:
       'Espy Sans 12',
       'Espy Sans 12 Matched Fallback',
       /* Another option if Verdana is not available */
       'Espy Sans 12 Arial Fallback',
       'Espy Sans 12 Roboto Fallback',
       sans-serif;
   }

So the idea is that you can use a system font and change the styling with these overrides that allow you to closer align its overall page size to your custom font. You can take this a step further by finding the system font that already is the closest shape, so that even the individual character shifts are minimized.

Since there was a clear success criteria (minimize visual differences) this seemed like a perfect goal for an LLM to automate. I didn’t do any fancy harness engineering, I just asked for it to minimize the differences and prodded it a few times. I already have a local headless chromium so it used that to render the pages. Because this would otherwise be a very laborious process of tweak-check-tweak-check, I am very thankful that was able to automate this.

So mark this down as one of the tasks the clankers are especially well suited to tackle.