Add createFontStack for metrics-based font fallbacks

[michaeltaranto]

Creates metrics-based @font-face declarations to improve the alignment of font family fallbacks, which can dramatically improve the Cumulative Layout Shift metric for sites that depend on a web font.

Example usage

import { createFontStack } from '@capsizecss/core';
import lobster from '@capsizecss/metrics/lobster';
import helveticaNeue from '@capsizecss/metrics/helveticaNeue';
import arial from '@capsizecss/metrics/arial';

const { fontFamily, fontFaces } = createFontStack([
  lobster,
  helveticaNeue,
  arial,
]);

The returned values are the computed font family and the generated font face declarations:

// `fontFamily`
"Lobster, 'Lobster Fallback: Helvetica Neue', 'Lobster Fallback: Arial'"

/* `fontFaces` */
@font-face {
  font-family: 'Lobster Fallback: Helvetica Neue';
  src: local('Helvetica Neue');
  ascent-override: 115.1741%;
  descent-override: 28.7935%;
  size-adjust: 86.8251%;
}
@font-face {
  font-family: 'Lobster Fallback: Arial';
  src: local('Arial');
  ascent-override: 113.5679%;
  descent-override: 28.392%;
  size-adjust: 88.053%;
}

[changeset-bot]

🦋 Changeset detected

Latest commit: 14d3086

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@capsizecss/core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[mrm007]

Really excited for this work to finally get published! 👏👏👏

Just a few nitpicky comments from me 🏃‍♂️

[phil-lgr]

Really hyped about this one, can we help in any way? I'd like to try and test this

[michaeltaranto]

Really hyped about this one, can we help in any way? I'd like to try and test this

Apologies for the festive season delays on this one 😄. Hoping to get it through soon. The full benefit will be had in tandem with the update to the metrics package which will be PR'd shortly.

FWIW, there is a snapshot deployment of this PR you can take for a spin:

npm install @capsizecss/core@0.0.0-create-font-stack-20221130045640

To test out the fallbacks with the size-adjust property you can install the updated metrics package too:

npm install @capsizecss/metrics@0.0.0-x-width-avg-20230123213508