From cab68fbcbbf1e5c22021df6bd861b558f0284419 Mon Sep 17 00:00:00 2001
From: John Rood <john.rood@skillsoft.com>
Date: Mon, 6 Jan 2025 12:51:54 -0600
Subject: [PATCH] feat(fonts): Prioritize woff2

---
 packages/gamut-styles/src/AssetProvider.tsx     | 14 +++++++-------
 packages/gamut-styles/src/remoteAssets/fonts.ts | 12 ++++++------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/gamut-styles/src/AssetProvider.tsx b/packages/gamut-styles/src/AssetProvider.tsx
index 9fe2ff6361..7a8e898b2c 100644
--- a/packages/gamut-styles/src/AssetProvider.tsx
+++ b/packages/gamut-styles/src/AssetProvider.tsx
@@ -1,18 +1,18 @@
 import { webFonts } from './remoteAssets/fonts';
 
 export const createFontLinks = () =>
-  webFonts.flatMap(({ filePath, extensions }) =>
-    extensions.map((ext) => (
+  webFonts
+    .filter((f) => f.extensions.includes('woff2'))
+    .map(({ filePath }) => (
       <link
-        key={`${filePath}-${ext}`}
+        key={filePath}
         rel="preload"
-        href={`${filePath}.${ext}`}
+        href={`${filePath}.woff2`}
         crossOrigin="anonymous"
         as="font"
-        type={`font/${ext}`}
+        type="font/woff2"
       />
-    ))
-  );
+    ));
 
 export const AssetProvider = () => {
   return <>{createFontLinks()}</>;
diff --git a/packages/gamut-styles/src/remoteAssets/fonts.ts b/packages/gamut-styles/src/remoteAssets/fonts.ts
index 7a6586c2c6..0da7f51b09 100644
--- a/packages/gamut-styles/src/remoteAssets/fonts.ts
+++ b/packages/gamut-styles/src/remoteAssets/fonts.ts
@@ -3,37 +3,37 @@ export const FONT_ASSET_PATH = `https://www.codecademy.com/gamut`;
 export const webFonts = [
   {
     filePath: `${FONT_ASSET_PATH}/apercu-regular-pro`,
-    extensions: ['woff', 'woff2'],
+    extensions: ['woff2', 'woff'],
     name: 'Apercu',
   },
   {
     filePath: `${FONT_ASSET_PATH}/apercu-italic-pro`,
-    extensions: ['woff', 'woff2'],
+    extensions: ['woff2', 'woff'],
     name: 'Apercu',
     style: 'italic',
   },
   {
     filePath: `${FONT_ASSET_PATH}/apercu-bold-pro`,
-    extensions: ['woff', 'woff2'],
+    extensions: ['woff2', 'woff'],
     name: 'Apercu',
     weight: 'bold',
   },
   {
     filePath: `${FONT_ASSET_PATH}/apercu-bold-italic-pro`,
-    extensions: ['woff', 'woff2'],
+    extensions: ['woff2', 'woff'],
     name: 'Apercu',
     weight: 'bold',
     style: 'italic',
   },
   {
     filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Bold-WebS`,
-    extensions: ['woff', 'woff2'],
+    extensions: ['woff2', 'woff'],
     name: 'Suisse',
     weight: 'bold',
   },
   {
     filePath: `${FONT_ASSET_PATH}/SuisseIntlMono-Regular-WebS`,
-    extensions: ['woff', 'woff2'],
+    extensions: ['woff2', 'woff'],
     name: 'Suisse',
   },
 ];