feat(site): configure global fonts

greyscaled · greyscaled · commit 594006c90397 · 2022-03-20T20:25:46.000Z
Summary:

Installs fira code and Inter

Impact:

A more pleasant dashboard experience in v2 that matches our prefer font
families from v1
diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
@@ -4,6 +4,7 @@ import { light, dark } from "../src/theme"
 import { addDecorator } from "node_modules/@storybook/react"
 import { createMemoryHistory } from "history"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
+import "../src/theme/global-fonts"
 
 addDecorator(withThemes(ThemeProvider, [light, dark]))
 
diff --git a/site/package.json b/site/package.json
@@ -23,6 +23,8 @@
     "typegen": "xstate typegen 'src/**/*.ts'"
   },
   "dependencies": {
+    "@fontsource/fira-code": "4.5.5",
+    "@fontsource/inter": "4.5.4",
     "@material-ui/core": "4.9.4",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.42",
diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -16,6 +16,7 @@ import { WorkspacePage } from "./pages/workspaces/[workspace]"
 import { HealthzPage } from "./pages/healthz"
 import { AuthAndNav, RequireAuth } from "./components/Page"
 import { XServiceProvider } from "./xServices/StateContext"
+import "./theme/global-fonts"
 
 export const App: React.FC = () => {
   return (
diff --git a/site/src/theme/global-fonts.ts b/site/src/theme/global-fonts.ts
@@ -0,0 +1,7 @@
+// Monospace fonts used for code, button styles, and banners
+import "@fontsource/fira-code/400.css"
+import "@fontsource/fira-code/600.css"
+// Main body copy font
+import "@fontsource/inter/300.css"
+import "@fontsource/inter/400.css"
+import "@fontsource/inter/600.css"
diff --git a/site/yarn.lock b/site/yarn.lock
@@ -1262,6 +1262,16 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/fira-code@4.5.5":
+  version "4.5.5"
+  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-4.5.5.tgz#6e3ccb1095e3411d2c62b8f8cefb546b973c6eb9"
+  integrity sha512-bwsPmA5HW11SR0oIkgqSJYI3A8KP8aQLRCCH/EnR9gLHRuTFi1iG7GQ3wDTKy/AhECQJAKjXZ+mkVKlMxUaYCQ==
+
+"@fontsource/inter@4.5.4":
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.4.tgz#d6906fdaaf81242d975a1f9b6dedab7bfba77997"
+  integrity sha512-D0icTFpt9bWvB/OEXMztYf0bhUQZoDIYpsco5C7GVfxgKDRl8Jdn3N2aHHQqwjgRUUvRuyMv8HrRM8Hrt4U52w==
+
 "@gar/promisify@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
