Fontpie - get your layout shifts optimized with a CLI-generated piece of CSS!

Features

🏃‍♂️ Runs from command line

💪 Generates fallback font metrics to match any custom web font

🚀 Framework, language, and bundler-agnostic solution

The problem

Custom web font usage is one of the most common causes of cumulative layout shifts on a page. It happens because your custom font metrics differ from the fallback font metrics available in the operating system, and it is the fallback font that is used by the browser to calculate block sizes while the custom font is loading. Thus, the same text with the same font-size and line-height properties may occupy different amounts of space.

The solution

Adjust metrics of the fallback font using ascent-override, descent-override, line-gap-override, size-adjust properties based on the custom font metrics.

The outcome

Layout shift without metric adjustments

Layout shift is visible. Titles, descriptions takes more space with a fallback(Arial) until a custom font(Roboto) being loaded.

Layout shift with metric adjustments

Layout shift does not exist. Fallback font(Arial) with adjusted metrics takes the same space as a custom font(Roboto).

Usage

1. Run the following command, make sure the relative path leads to your custom web font file:

   npx fontpie ./roboto-regular.woff2 --name Roboto

2. Copypaste the output alongside your font-face declarations:

   @font-face {
     font-family: 'Roboto';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('roboto-regular.woff2') format('woff2');
   }
   
   @font-face {
     font-family: 'Roboto Fallback';
     font-style: normal;
     font-weight: 400;
     src: local('Times New Roman');
     ascent-override: 84.57%;
     descent-override: 22.25%;
     line-gap-override: 0.00%;
     size-adjust: 109.71%;
   }
   
   html {
     font-family: 'Roboto', 'Roboto Fallback';
   }

Options

Usage: index [options] <file>

Arguments:
  file                          *.ttf, *.otf, *.woff or *.woff2 font file

Options:
  -f, --fallback <font-family>  fallback font family type: "serif", "sans-serif" or "mono" (default: "san-serif")
  -s, --style <style>           font-style value (default: "normal")
  -w, --weight <weight>         font-weight value (default: "400")
  -n, --name <name>             font name what will be used as font-family value, by default font filename
  -h, --help                    display help for command

Serif: Times New Roman

Sans-Serif: Arial

Compatibility

The properties used for font metric adjusments:

• ascent-override
• descent-override
• line-gap-override
• size-adjust

are not supported by some browsers:

| Browser | Support | |---|---| | Chrome | ✅ 87 | | Edge | ✅ 87 | | Firefox | ✅ 89 | | Opera | ✅ 73 | | Safari | ❌ |

You can keep track on the browser's support for these properties here.

❤️ Credits

Big thanks to

• Katie Hempenius & Kara Erickson on the Google Aurora team for an algorithm and suggestion - see notes on calculating font metric overrides
• Next.js for an amazing implementation of it inside next/font
• Fontaine for the initial idea