feat(fonts): Prioritize woff2

Codecademy · Jan 6, 2025 · 9d95ebc · 9d95ebc
1 parent eacdd5c
commit 9d95ebc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git a/packages/gamut-styles/src/AssetProvider.tsx b/packages/gamut-styles/src/AssetProvider.tsx
@@ -1,18 +1,21 @@
 import { webFonts } from './remoteAssets/fonts';
 
+/*
+ * Only preload woff2 fonts, since woff1 are only included as fallbacks.
+ */
 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
@@ -1,39 +1,41 @@
 export const FONT_ASSET_PATH = `https://www.codecademy.com/gamut`;
 
+// woff2 should precede woff so that browsers try woff2 first.
+
 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',
   },
 ];