Font Overrides to Reduce CLS

[xHomu]

Since Epic Stack is designed to get the developers off the ground running, we can introduce a small optimization to the stack that eliminates Cumulative Layout Shift from font swapping.

References

• https://nalu.wiki/nalu/p/using-fonts-in-remix-216
• https://simonhearne.com/2021/layout-shifts-webfonts/

Example

This can be accomplished by introducing metric overrides for default system fonts while the actual fonts stream in.

// styles/fonts.css
@font-face {
  font-family: "Qualy";
  src: url("/fonts/Qualy.otf");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Qualy Override";
  font-style: normal;
  font-weight: 400;
  src:  local("Helvetica Neue"), local("BlinkMacSystemFont"), local("Arial"), local("Noto Sans"), local("Segoe UI"), local("Roboto"), local(-apple-system), local(sans-serif), local(ui-sans-serif);
  ascent-override: 84.57%;
  descent-override: 27.27%;
  line-gap-override: 0.00%;
  size-adjust: 115.30%;
}

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        logo: ["Qualy", "Qualy Override"],
      }, 
  },
}

For an production implementation, here's how font.css looks on the Mana Wiki:

• https://github.com/manawiki/core/blob/main/app/styles/fonts.css

[kentcdodds]

This is a terrific idea. Would you be willing to open a pull request for this? I'd love some docs that reference those articles as well so people know how to do that when they switch fonts.

[xHomu]

Sure, I'll get on that this weekend!

[xHomu]

PR Submitted #128