[marissahuysentruyt]

Description

Adds support for the Adobe Clean Spectrum VF font, with Adobe Clean remaining as a fallback.

Screenshots (if applicable)

🚫 Before (Adobe Clean in the rendered fonts; our local font files called in Network tab)

✅ After (Adobe Clean Spectrum VF in the rendered fonts; the typekit URL called in Network tab)

Type of change

• Bug fix
• New feature / block
• Refactor
• Docs / content
• Chore (deps, config, tooling)

Related issue(s)

• fixes [Fonts] Adobe Clean Spectrum Variable font #6 / spdocs-107

Validation steps

• This PR has code changes, and our linters still pass.
• This PR affects production code, so it was browser tested (see below).

To Validate

URL for testing:
https://spectrum-vf--spectrum-hub--adobe.aem.live/web/swc/components/action-button
https://spectrum-vf--spectrum-hub--adobe.aem.live/web/rsp/components/menu
https://spectrum-vf--spectrum-hub--adobe.aem.live/foundations/styles/object-styles/border-width

• Make sure all PR Checks have passed
• Pull down the branch locally or visit the branch preview
• Run npm test and confirm all tests pass
• Run npm run lint and confirm no linting errors
• Verified in browser with aem up

• Inspect a page in Dev Tools.
• Verify the --s2-font-family token is resolving to adobe-clean-spectrum-vf first, with a fallback to its named font ("Adobe Clean Spectrum VF" for any Adobe machines), and further to the existing Trebuchet adjusted font. the previous adobe-clean and "Adobe Clean" fonts.
• Visit the computed styles tab and verify in the Rendered Fonts section that "Adobe Clean Spectrum VF" is showing up now.
• If you block the Typekit URL in dev tools, you should see the fallback font.
  • This will work immediately for the playgrounds because their stack is slightly different.
  • For other content, the first fallback would be a local version of Adobe Clean Spectrum VF, so any machine with a local version won't render Trebuchet even if you block the Typekit URL. Instead you can temporarily remove the "Adobe Clean Spectrum VF" fallback in styles.css at about line 301 to validate the request is blocked.

Accessibility testing checklist

• Keyboard

No keyboard functionality has been changed.

• Screen reader

No screen reader functionality has been changed.

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run all PSI checks
• Re-run failed PSI checks
• Re-sync branch

Commits

• 05c5583 ✅ (latest)
• 83f6641 ✅
• 4c41d42 ✅
• ad552a1 ✅
• 925c56b ✅
• 8300dbb ✅
• 748d635 ✅
• f1cf278 ✅

[marissahuysentruyt]

@auniverseaway were you meaning we could "pull the font off their origin" like this?

I also hit these URLs, and downloaded the fonts I think. So I have a local commit with those files instead (and then with these URLs changes to the repo path instead)

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/foundations/styles/object-styles/border-width
🖥️	/foundations/styles/object-styles/border-width
📱	/web/rsp/components/menu
🖥️	/web/rsp/components/menu
📱	/web/swc/components/action-button
🖥️	/web/swc/components/action-button

[marissahuysentruyt]

moving back to draft. sounds like there's more to do, and this will be a follow-up after launch.

[marissahuysentruyt]

look at the shared css for the playground.

[marissahuysentruyt]