perf(cdr-fonts.css): Low-CLS fallback

[caseycarroll]

Description

This change reduces the layout shift impact of font-display: swap. Font-face descriptors allow us to resize the fallback font to closely match the brand font that replaces it. This will improve the page loading experience for cold-cache visitors of REI.com.

I used Fontaine to automatically generate the font-face descriptors.

I added this new fallback to cdr-reset. Consumers of Cedar will need to explicitly add "Graphik fallback" and "Stuart fallback" to their font-family property. Considering that, I may need to add some documentation.

In the example, notice how the call to action moves as Stuart loads in. After adding the fallback font to the font-family property, the call to action no longer jumps as the font loads in.
https://github.com/rei/rei-cedar/assets/6683238/06b1a5d3-7ef2-4e79-b53d-84bcd339a635

Checklist:

Design:

• Reviewed with designer and meets expectations

Cross-browser testing:

• Chrome
• Firefox
• Edge
• Safari
• iOS
• Android

Unit testing:

• Sufficient unit test coverage (see unit test best practices for ideas)
• Snapshot updates are explained with comment and reference the relevant source code change

A11y:

• Meets WCAG AA standards

Documentation:

• API docs created/updated
• Examples created/updated

[caseycarroll]

Graphik and Stuart are variable fonts, yet they don't support italics (hence the separate font-face for their italic counterparts). We should see if there's an updated version of this variable font that supports italics. This would remove the additional italic font download for pages that use italics.

FontGoogles confirms Graphik and Stuart are variable fonts, but the only variation they support is "weight".

More on this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide#italic

[benjag]

Don't worry about the failure, chromedriver just needs to be updated. I'll pull this in to a release branch and take care of it then

[benjag]

@caseycarroll Why do you think consumers will need to explicitly add the fallback fonts?

[caseycarroll]

@caseycarroll Why do you think consumers will need to explicitly add the fallback fonts?

I made this assumption before looking through microsites' font-family declarations. I assumed they manually set Stuart, Georgia, but that's not the case. They use the cdr-font-family-serif token.

Given that, it looks like I will need to make another PR on cedar-tokens to add these new fallbacks. https://github.com/rei/rei-cedar-tokens/blob/next/tokens/_options/font.json5

[benjag]

@caseycarroll Why do you think consumers will need to explicitly add the fallback fonts?

I made this assumption before looking through microsites' font-family declarations. I assumed they manually set Stuart, Georgia, but that's not the case. They use the cdr-font-family-serif token.

Given that, it looks like I will need to make another PR on cedar-tokens to add these new fallbacks. https://github.com/rei/rei-cedar-tokens/blob/next/tokens/_options/font.json5

Why don't we take this to slack so you can share those examples, microsites in most cases shouldn't be defining their own font-families, they should just be importing the cdr-fonts asset.

[caseycarroll]

Manual tests in climbers site caught layout shift, so I adjusted the fallbacks some more. Instead of using an automated approach, I went with a manual one. The end result is a simpler font-face ruleset and the discovery that Verdana is a better fallback for Graphik. Attaching some evidence.

Note that the nav does not have the fallbacks applied, so nav fonts still shift.

font.cls.control.mov

font.cls.test.mov