feat: update global font

config/design-tokens/fonts.js

@@ -1,59 +1,37 @@
 export default {
   display: {
-    family: "Anek Latin",
-    format: "truetype",
-    weights: {
-      ExtraBold: {
-        path: "/aneklatin/AnekLatin-ExtraBold.ttf",
-        "font-style": "normal",
-        weight: 800,
-      },
-      Bold: {
-        path: "/aneklatin/AnekLatin-Bold.ttf",
-        "font-style": "normal",
-        weight: 700,
+    family: "Atikinson Hyperlegible Next",
+    format: "woff2",
+    styles: {
+      Regular: {
+        path: "/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2",
+        fontStyle: "normal",
+        fontWeight: "125 950",
+        fontStretch: "75% 125%",
       },
     },
   },
   body: {
-    family: "iA Writer Quattro V",
+    family: "Atikinson Hyperlegible Next",
     format: "woff2",
-    weights: {
+    styles: {
       Regular: {
-        path: "/quattro/iAWriterQuattroS-Regular.woff2",
-        "font-style": "normal",
-        weight: 400,
-      },
-      Italic: {
-        path: "/quattro/iAWriterQuattroS-Italic.woff2",
-        "font-style": "italic",
-        weight: 400,
-      },
-      Bold: {
-        path: "/quattro/iAWriterQuattroS-Bold.woff2",
-        "font-style": "normal",
-        weight: 650,
-      },
-      BoldItalic: {
-        path: "/quattro/iAWriterQuattroS-BoldItalic.woff2",
-        "font-style": "italic",
-        weight: 650,
+        path: "/hyperlegible/AtkinsonHyperlegibleNextVF-Variable.woff2",
+        fontStyle: "normal",
+        fontWeight: "125 950",
+        fontStretch: "75% 125%",
       },
     },
   },
   monospace: {
-    family: "IBM Plex Mono",
-    format: "truetype",
-    weights: {
+    family: "Atikinson Hyperlegible Mono",
+    format: "woff2",
+    styles: {
       Regular: {
-        path: "/ibmplexmono/IBMPlexMono-Regular.ttf",
-        "font-style": "normal",
-        weight: 400,
-      },
-      Italic: {
-        path: "/ibmplexmono/IBMPlexMono-Italic.ttf",
-        "font-style": "italic",
-        weight: 400,
+        path: "/hyperlegible-mono/AtkinsonHyperlegibleMonoVF-Variable.woff2",
+        fontStyle: "normal",
+        fontWeight: "125 950",
+        fontStretch: "75% 125%",
       },
     },
   },

config/filters/postcss/utils/font-family.js

@@ -1,22 +1,22 @@
 import path from "path";
 
-import { ASSETS_FONTS_PATH } from "../../../constants/paths.js";
 import fonts from "../../../design-tokens/fonts.js";
 
-const getFontUrl = (src) => path.join(ASSETS_FONTS_PATH, src);
+const getFontUrl = (src) => path.join("/assets/fonts", src);
 
 const fontsToCss = (fonts) => {
   return Object.entries(fonts).reduce((css, [, fontProperties]) => {
     const family = fontProperties.family;
     const format = fontProperties.format;
-    const weights = fontProperties.weights;
+    const styles = fontProperties.styles;
 
     return (
       css +
-      Object.entries(weights).reduce((css, [variant, fontFamily]) => {
+      Object.entries(styles).reduce((css, [variant, fontFamily]) => {
         const url = getFontUrl(fontFamily.path);
-        const style = fontFamily["font-style"];
-        const weight = fontFamily.weight;
+        const style = fontFamily.fontStyle;
+        const weight = fontFamily.fontWeight;
+        const stretch = fontFamily.fontStretch;
         const postScriptName = [family, variant].join("-").replaceAll(" ", "");
 
         return (
@@ -25,6 +25,7 @@ const fontsToCss = (fonts) => {
             family,
             style,
             weight,
+            stretch,
             url,
             family,
             postScriptName,
@@ -40,6 +41,7 @@ const fontFamilyToCss = (
   family,
   style,
   weight,
+  stretch,
   url,
   localName,
   postScriptName,
@@ -48,6 +50,7 @@ const fontFamilyToCss = (
     font-family: ${family};
     font-style: ${style};
     font-weight: ${weight};
+    font-stretch: ${stretch};
     font-display: swap;
     src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}")
 }\n`;

config/filters/postcss/utils/font-variables.js

@@ -1,45 +1,57 @@
+/*
+ * Fallbacks from Modern Font Stacks.
+ * https://modernfontstacks.com/
+ */
+
 import fonts from "../../../design-tokens/fonts.js";
 
-const fallbacks = [
-  "-apple-system",
-  "BlinkMacSystemFont",
-  "Segoe UI",
-  "Roboto",
-  "Ubuntu",
-  "Open Sans",
-  "Helvetica Neue",
-  "sans-serif",
+const displayFallbacks = [
+  "ui-monospace",
+  "Cascadia Code",
+  "Source Code Pro",
+  "Menlo",
+  "Consolas",
+  "DejaVu Sans Mono",
+  "monospace",
 ];
 
+const bodyFallbacks = [
+  "ui-monospace",
+  "Cascadia Code",
+  "Source Code Pro",
+  "Menlo",
+  "Consolas",
+  "DejaVu Sans Mono",
+  "monospace",
+];
+
+const monoFallbacks = [
+  "ui-monospace",
+  "Cascadia Code",
+  "Source Code Pro",
+  "Menlo",
+  "Consolas",
+  "DejaVu Sans Mono",
+  "monospace",
+];
+
+const fallbacks = {
+  display: displayFallbacks,
+  body: bodyFallbacks,
+  monospace: monoFallbacks,
+};
+
 const fontsToCss = (fonts) => {
   return Object.entries(fonts).reduce((css, [fontType, fontProperties]) => {
     const family = fontProperties.family;
-    const weights = fontProperties.weights;
 
     const fontTypeCss = fontFamilyToCss(fontType, family);
-    const fontWeightsCss = fontWeightsToCss(fontType, weights);
 
-    return css + fontTypeCss + fontWeightsCss;
+    return css + fontTypeCss;
   }, ``);
 };
 
-const validVariants = ["regular", "bold", "extrabold"];
-
-const fontWeightsToCss = (type, weights) =>
-  Object.entries(weights)
-    .filter(([variant]) => validVariants.includes(variant.toLowerCase()))
-    .reduce((css, [variant, fontFamily]) => {
-      const weight = fontFamily.weight;
-
-      return css + fontWeightToCss(type, variant.toLowerCase(), weight);
-    }, ``);
-
-const fontWeightToCss = (type, variant, value) =>
-  `--font-weight-${type}-${variant}: ${value};`;
-
 const fontFamilyToCss = (type, value) =>
-  `--font-family-${type}: ${value},${fallbacks.join(",")};`;
+  `--font-family-${type}: ${value},${fallbacks[type].join(",")};`;
 
-const css = `:root{${fontsToCss(fonts)}}`;
-
-export default css;
+export default `:root{${fontsToCss(fonts)}}`;