Install Inter from Fontsource

Rather than including the entire font statically in our repo, we install it from Fontsource and import it in the Vue entrypoint. We also switch to the variable-weight font, which offers a substantial bandwidth savings (<50KB versus >800KB). Issue #38: Install font from Fontsource
OpenTechStrategies · Sep 6, 2024 · 5ba342e · 5ba342e
1 parent 3af9f63
commit 5ba342e
Show file tree

Hide file tree

Showing 62 changed files with 9 additions and 217 deletions.
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
diff --git a/front-end/package.json b/front-end/package.json
@@ -16,6 +16,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.20",
     "@heroicons/vue": "^2.1.4",
     "@vue/eslint-config-airbnb-with-typescript": "^8.0.0",
     "ajv": "^8.16.0",

diff --git a/front-end/src/assets/base.css b/front-end/src/assets/base.css
@@ -1,8 +1,3 @@
-@font-face {
-  font-family: 'Inter';
-  src: url('@/assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
-}
-
 :root {
   --color-black: #363636;
   --color-white: #ffffff;
@@ -24,6 +19,6 @@
 
 body {
   background-color: var(--color-white);
-  font-family: 'Inter', sans-serif;
+  font-family: 'Inter Variable', sans-serif;
   font-size: var(--wac-font-size--med);
 }
diff --git a/front-end/src/assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf b/front-end/src/assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf
diff --git a/front-end/src/assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf b/front-end/src/assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf
diff --git a/front-end/src/assets/fonts/Inter/OFL.txt b/front-end/src/assets/fonts/Inter/OFL.txt
diff --git a/front-end/src/assets/fonts/Inter/README.txt b/front-end/src/assets/fonts/Inter/README.txt
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-Black.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-Black.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-BlackItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-BlackItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-Bold.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-Bold.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-BoldItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-BoldItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-ExtraBold.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-ExtraBold.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-ExtraBoldItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-ExtraLight.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-ExtraLight.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-ExtraLightItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-Italic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-Italic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-Light.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-Light.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-LightItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-LightItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-Medium.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-Medium.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-MediumItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-Regular.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-Regular.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-SemiBold.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-SemiBoldItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-Thin.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-Thin.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_18pt-ThinItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_18pt-ThinItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-Black.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-Black.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-BlackItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-BlackItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-Bold.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-Bold.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-BoldItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-BoldItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-ExtraBold.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-ExtraBold.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-ExtraBoldItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-ExtraLight.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-ExtraLight.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-ExtraLightItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-Italic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-Italic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-Light.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-Light.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-LightItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-LightItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-Medium.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-Medium.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-MediumItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-MediumItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-Regular.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-Regular.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-SemiBold.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-SemiBold.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-SemiBoldItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-Thin.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-Thin.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_24pt-ThinItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_24pt-ThinItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-Black.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-Black.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-BlackItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-BlackItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-Bold.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-Bold.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-BoldItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-BoldItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-ExtraBold.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-ExtraBold.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-ExtraBoldItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-ExtraLight.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-ExtraLight.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-ExtraLightItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-Italic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-Italic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-Light.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-Light.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-LightItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-LightItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-Medium.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-Medium.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-MediumItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-MediumItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-Regular.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-Regular.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-SemiBold.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-SemiBold.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-SemiBoldItalic.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-Thin.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-Thin.ttf
diff --git a/front-end/src/assets/fonts/Inter/static/Inter_28pt-ThinItalic.ttf b/front-end/src/assets/fonts/Inter/static/Inter_28pt-ThinItalic.ttf
diff --git a/front-end/src/main.ts b/front-end/src/main.ts
@@ -1,3 +1,4 @@
+import '@fontsource-variable/inter';
 import './assets/main.css';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';