load optimized Inter fonts (closes #709)

.gitignore

@@ -9,6 +9,7 @@ node_modules
 static/fonts/*
 !static/fonts/.gitkeep
 !static/fonts/redaction
+!static/fonts/inter*
 static/twemoji/*
 !static/twemoji/.gitkeep
 /coverage

src/app.html

@@ -25,7 +25,7 @@
     <meta charset="utf-8" />
     <link rel="manifest" href="/manifest.webmanifest">
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <link rel="preload" href="/fonts/Inter-Regular.otf" as="font" type="font/otf" crossorigin>
+    <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/fonts/redaction/Redaction_50-Italic.woff2" as="font" type="font/woff2" crossorigin>
     <meta name="viewport" content="width=device-width" />
     %sveltekit.head%

src/routes/+layout.svelte

@@ -6,6 +6,7 @@
   import 'radicle-design-system/static/colors.css';
   import 'radicle-design-system/static/elevation.css';
   import 'radicle-design-system/static/typography.css';
+  import '../styles/fonts.css'; /* must be after radicle-design-system/.../typography.css !! */
   import '../styles/app.css';
 
   import '$lib/stores/theme/theme.store';

src/styles/fonts.css

@@ -0,0 +1,16 @@
+/* cloned from radicle-design-system so we can swap in optimized fonts */
+
+@font-face {
+  font-family: 'Inter Bold';
+  src: url('/fonts/Inter-Bold.woff2');
+}
+
+@font-face {
+  font-family: 'Inter SemiBold';
+  src: url('/fonts/Inter-Semibold.woff2');
+}
+
+@font-face {
+  font-family: 'Inter Regular';
+  src: url('/fonts/Inter-Regular.woff2');
+}