chore(site): use variable font for Inter (#10903)

site/jest.config.ts

@@ -35,6 +35,7 @@ module.exports = {
       moduleDirectories: ["node_modules", "<rootDir>/src"],
       moduleNameMapper: {
         "\\.css$": "<rootDir>/src/testHelpers/styleMock.ts",
+        "^@fontsource": "<rootDir>/src/testHelpers/styleMock.ts",
       },
     },
     {

site/package.json

@@ -34,8 +34,8 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@fastly/performance-observer-polyfill": "2.0.0",
+    "@fontsource-variable/inter": "5.0.15",
     "@fontsource/ibm-plex-mono": "5.0.5",
-    "@fontsource/inter": "5.0.2",
     "@monaco-editor/react": "4.6.0",
     "@mui/icons-material": "5.14.0",
     "@mui/lab": "5.0.0-alpha.129",

site/pnpm-lock.yaml

@@ -27,12 +27,12 @@ dependencies:
   '@fastly/performance-observer-polyfill':
     specifier: 2.0.0
     version: 2.0.0
+  '@fontsource-variable/inter':
+    specifier: 5.0.15
+    version: 5.0.15
   '@fontsource/ibm-plex-mono':
     specifier: 5.0.5
     version: 5.0.5
-  '@fontsource/inter':
-    specifier: 5.0.2
-    version: 5.0.2
   '@monaco-editor/react':
     specifier: 4.6.0
     version: 4.6.0(monaco-editor@0.44.0)(react-dom@18.2.0)(react@18.2.0)
@@ -2453,12 +2453,12 @@ packages:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: true
 
-  /@fontsource/ibm-plex-mono@5.0.5:
-    resolution: {integrity: sha512-A1rDiQB7X7oOgsZbjeSQV3r/ZOBEZDjKEnlLvWqd4sMBZwGKTDnCxQYoqedY/8if2NXyiQoLXPdV5RpQ/3BerQ==}
+  /@fontsource-variable/inter@5.0.15:
+    resolution: {integrity: sha512-CdQPQQgOVxg6ifmbrqYZeUqtQf7p2wPn6EvJ4M+vdNnsmYZgYwPPPQDNlIOU7LCUlSGaN26v6H0uA030WKn61g==}
     dev: false
 
-  /@fontsource/inter@5.0.2:
-    resolution: {integrity: sha512-pQ1ms5nbprD+7Dnu5h0T9XOSJi5pvOanLCxi6mA9/5wclXFkkzvZo31ddoD8/Urncx11967qTnvGglPeWEOT+Q==}
+  /@fontsource/ibm-plex-mono@5.0.5:
+    resolution: {integrity: sha512-A1rDiQB7X7oOgsZbjeSQV3r/ZOBEZDjKEnlLvWqd4sMBZwGKTDnCxQYoqedY/8if2NXyiQoLXPdV5RpQ/3BerQ==}
     dev: false
 
   /@humanwhocodes/config-array@0.11.13:
@@ -13444,7 +13444,7 @@ packages:
     peerDependencies:
       eslint: '>=7'
       meow: ^9.0.0
-      optionator: 0.9.3
+      optionator: ^0.9.1
       stylelint: '>=13'
       typescript: '*'
       vite: '>=2.0.0'

site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import { type ComponentProps, type FC, Fragment } from "react";
 import type { ProvisionerJobLog } from "api/typesGenerated";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import { BODY_FONT_FAMILY, MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { Logs } from "./Logs";
 import Box from "@mui/material/Box";
 import { type Interpolation, type Theme } from "@emotion/react";
@@ -100,7 +100,7 @@ const styles = {
     padding: "4px 24px",
     display: "flex",
     alignItems: "center",
-    fontFamily: "Inter",
+    fontFamily: BODY_FONT_FAMILY,
     borderBottom: `1px solid ${theme.palette.divider}`,
     background: theme.palette.background.default,
 

site/src/theme/constants.ts

@@ -1,7 +1,7 @@
 export const borderRadius = 8;
 export const MONOSPACE_FONT_FAMILY =
   "'IBM Plex Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace";
-export const BODY_FONT_FAMILY = `"Inter", system-ui, sans-serif`;
+export const BODY_FONT_FAMILY = `"Inter Variable", system-ui, sans-serif`;
 export const navHeight = 62;
 export const containerWidth = 1380;
 export const containerWidthMedium = 1080;

site/src/theme/globalFonts.ts

@@ -2,7 +2,4 @@
 import "@fontsource/ibm-plex-mono/400.css";
 import "@fontsource/ibm-plex-mono/600.css";
 // Main body copy font
-import "@fontsource/inter/300.css";
-import "@fontsource/inter/400.css";
-import "@fontsource/inter/500.css";
-import "@fontsource/inter/600.css";
+import "@fontsource-variable/inter";