feat(fonts): Prioritize woff2

[jrood]

Overview

When we include a @font-face declaration with multiple files (e.g. woff and woff2), the browser will try the first file given and only load subsequent files if the first fails. Since woff2 has better compression and is supported by all evergreen browsers (including Safari), we should list woff2 first. These files are rendered in @font-face declarations here.

We also should only preload woff2 so that we don't waste critical early load-time network resources on woff1 files that likely won't be used.

PR Checklist

• Related to designs:
• Related to JIRA ticket: DOT-718
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

1. Visit the Portal PR ENV
2. Open the network tab
3. Reload the page
4. Filter network requests using the search "apercu"
5. Ensure we are only loading woff2 files and not woff.

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal PR	Portal Env

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 9d95ebc.

---

☁️ Nx Cloud last updated this comment at 2025-01-06 22:56:05 UTC

[codecademydev]

🚀 Styleguide deploy preview ready!

https://677c5f50f2c08b6c195f12b6--gamut-preview.netlify.app

Deploy Logs

[codecademydev]

📬Published Alpha Packages:

@codecademy/gamut@57.6.4-alpha.9d95eb.0
@codecademy/gamut-icons@9.37.1-alpha.9d95eb.0
@codecademy/gamut-illustrations@0.50.1-alpha.9d95eb.0
@codecademy/gamut-kit@0.6.460-alpha.9d95eb.0
@codecademy/gamut-patterns@0.10.1-alpha.9d95eb.0
@codecademy/gamut-styles@17.3.0-alpha.9d95eb.0
@codecademy/gamut-tests@5.2.1-alpha.9d95eb.0

[klcodecademy]

I've been able to confirm that fonts being preloaded are in the woff2 format

[aresnik11]

LGTM!