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

BrunoQuaresma · web-flow · commit 6808daef0f60 · 2023-11-27T21:35:29.000Z
diff --git a/site/jest.config.ts b/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",
       },
     },
     {
diff --git a/site/package.json b/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",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/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,
 
diff --git a/site/src/theme/constants.ts b/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;
diff --git a/site/src/theme/globalFonts.ts b/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";

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ module.exports = {`
`35`	`35`	`moduleDirectories: ["node_modules", "<rootDir>/src"],`
`36`	`36`	`moduleNameMapper: {`
`37`	`37`	`"\\.css$": "<rootDir>/src/testHelpers/styleMock.ts",`
	`38`	`+ "^@fontsource": "<rootDir>/src/testHelpers/styleMock.ts",`
`38`	`39`	`},`
`39`	`40`	`},`
`40`	`41`	`{`