Skip to content

Get your layout shifts optimized with a CLI-generated piece of CSS

License

Notifications You must be signed in to change notification settings

pixel-point/fontpie

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

npm npm

Features

🏃‍♂️ Runs from command line

💪 Generates fallback font metrics to match any custom web font

🚀 Framework, language, and bundler-agnostic solution

👀 Multiple fallback font-weight support

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. Layouf shift without metric adjustments

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). Layout shift with metric adjustments

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

Monospace: Courier New

Compatibility

The properties used for font metric adjusments:

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

About

Get your layout shifts optimized with a CLI-generated piece of CSS

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published