feat: improve font-loading and fallbacks (#1984)

ory · Dec 24, 2024 · 7aa8dff · 7aa8dff
1 parent b34028c
commit 7aa8dff
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 5 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -276,6 +276,46 @@ const config: Config = {
     "@docusaurus/theme-search-algolia",
     "docusaurus-theme-redoc",
   ],
+  headTags: [
+    "InterVariable.woff2?v=4.0",
+    "JetBrainsMono-Regular.woff2",
+    // "Inter-Regular.woff2?v=4.0",
+    // "Inter-Italic.woff2?v=4.0",
+    // "Inter-Medium.woff2?v=4.0",
+    // "Inter-MediumItalic.woff2?v=4.0",
+    // "Inter-SemiBold.woff2?v=4.0",
+    // "Inter-SemiBoldItalic.woff2?v=4.0",
+    // "Inter-Bold.woff2?v=4.0",
+    // "Inter-BoldItalic.woff2?v=4.0",
+    // "Inter-ExtraBold.woff2?v=4.0",
+    // "Inter-ExtraBoldItalic.woff2?v=4.0",
+    // "Inter-Black.woff2?v=4.0",
+    // "Inter-BlackItalic.woff2?v=4.0",
+    // "JetBrainsMono-Bold.woff2",
+    // "JetBrainsMono-BoldItalic.woff2",
+    // "JetBrainsMono-ExtraBold.woff2",
+    // "JetBrainsMono-ExtraBoldItalic.woff2",
+    // "JetBrainsMono-ExtraLight.woff2",
+    // "JetBrainsMono-ExtraLightItalic.woff2",
+    // "JetBrainsMono-Italic.woff2",
+    // "JetBrainsMono-Light.woff2",
+    // "JetBrainsMono-LightItalic.woff2",
+    // "JetBrainsMono-Medium.woff2",
+    // "JetBrainsMono-MediumItalic.woff2",
+    // "JetBrainsMono-SemiBold.woff2",
+    // "JetBrainsMono-SemiBoldItalic.woff2",
+    // "JetBrainsMono-Thin.woff2",
+    // "JetBrainsMono-ThinItalic.woff2"
+  ].map((font: string) => ({
+    tagName: "link",
+    attributes: {
+      rel: "preload",
+      type: "font/woff2",
+      as: "font",
+      crossOrigin: "anonymous",
+      href: `/fonts/${font.includes("Inter") ? "Inter" : "JetBrainsMono"}/${font}`,
+    },
+  })),
   scripts: [
     // Needed as a workaround for https://answers.netlify.com/t/trailing-slash-missing-on-proxied-netlify-site/36367
     "/docs/scripts/redirect.js",

diff --git a/src/css/fonts.css b/src/css/fonts.css
@@ -5,13 +5,15 @@
   font-display: swap;
   src: url("/fonts/Inter/InterVariable.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: InterVariable;
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
   src: url("/fonts/Inter/InterVariable-Italic.woff2?v=4.0") format("woff2");
 }
+
 /* legacy name "Inter var" (Oct 2023) */
 @font-face {
   font-family: "Inter var";
@@ -20,13 +22,15 @@
   font-display: swap;
   src: url("/fonts/Inter/InterVariable.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: "Inter var";
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
   src: url("/fonts/Inter/InterVariable-Italic.woff2?v=4.0") format("woff2");
 }
+
 /* static fonts */
 @font-face {
   font-family: Inter;
@@ -35,118 +39,135 @@
   font-display: swap;
   src: url("/fonts/Inter/Inter-Thin.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: italic;
   font-weight: 100;
   font-display: swap;
   src: url("/fonts/Inter/Inter-ThinItalic.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 200;
   font-display: swap;
   src: url("/fonts/Inter/Inter-ExtraLight.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: italic;
   font-weight: 200;
   font-display: swap;
   src: url("/fonts/Inter/Inter-ExtraLightItalic.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 300;
   font-display: swap;
   src: url("/fonts/Inter/Inter-Light.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: italic;
   font-weight: 300;
   font-display: swap;
   src: url("/fonts/Inter/Inter-LightItalic.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("/fonts/Inter/Inter-Regular.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: italic;
   font-weight: 400;
   font-display: swap;
   src: url("/fonts/Inter/Inter-Italic.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url("/fonts/Inter/Inter-Medium.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: italic;
   font-weight: 500;
   font-display: swap;
   src: url("/fonts/Inter/Inter-MediumItalic.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url("/fonts/Inter/Inter-SemiBold.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: italic;
   font-weight: 600;
   font-display: swap;
   src: url("/fonts/Inter/Inter-SemiBoldItalic.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url("/fonts/Inter/Inter-Bold.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: italic;
   font-weight: 700;
   font-display: swap;
   src: url("/fonts/Inter/Inter-BoldItalic.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 800;
   font-display: swap;
   src: url("/fonts/Inter/Inter-ExtraBold.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: italic;
   font-weight: 800;
   font-display: swap;
   src: url("/fonts/Inter/Inter-ExtraBoldItalic.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url("/fonts/Inter/Inter-Black.woff2?v=4.0") format("woff2");
 }
+
 @font-face {
   font-family: Inter;
   font-style: italic;
@@ -157,13 +178,15 @@
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2") format("woff2");
   font-weight: bold;
   font-style: normal;
 }
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2")
     format("woff2");
   font-weight: bold;
@@ -172,13 +195,15 @@
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2") format("woff2");
   font-weight: 800;
   font-style: normal;
 }
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraBoldItalic.woff2")
     format("woff2");
   font-weight: 800;
@@ -187,6 +212,7 @@
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraLight.woff2")
     format("woff2");
   font-weight: 200;
@@ -195,6 +221,7 @@
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-ExtraLightItalic.woff2")
     format("woff2");
   font-weight: 200;
@@ -203,20 +230,23 @@
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-Italic.woff2") format("woff2");
   font-weight: normal;
   font-style: italic;
 }
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-Light.woff2") format("woff2");
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-LightItalic.woff2")
     format("woff2");
   font-weight: 300;
@@ -225,13 +255,15 @@
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-Medium.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-MediumItalic.woff2")
     format("woff2");
   font-weight: 500;
@@ -240,20 +272,23 @@
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-SemiBold.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-SemiBoldItalic.woff2")
     format("woff2");
   font-weight: 600;
@@ -262,13 +297,15 @@
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-Thin.woff2") format("woff2");
   font-weight: 100;
   font-style: normal;
 }
 
 @font-face {
   font-family: "JetBrains Mono";
+  font-display: swap;
   src: url("/fonts/JetBrainsMono/JetBrainsMono-ThinItalic.woff2")
     format("woff2");
   font-weight: 100;

diff --git a/src/css/theme.css b/src/css/theme.css
@@ -1,11 +1,14 @@
 @import url("./fonts.css");
 
 :root {
-  --ifm-font-family-base: "Inter", sans-serif;
-  --ifm-font-family-monospace: "JetBrains Mono", monospace;
+  --ifm-font-family-base-fallback: sans-serif;
+  --ifm-font-family-monospace-fallback: monospace;
+  --ifm-font-family-base: "InterVariable", var(--ifm-font-family-base-fallback);
+  --ifm-font-family-monospace: "JetBrains Mono",
+    var(--ifm-font-family-monospace-fallback);
   --ifm-color-primary: #312e81; /* Indigo 900 */
   --ifm-heading-color: #312e81; /* Indigo 900 - Color used for headings in text */
-  --ifm-heading-font-family: "Inter";
+  --ifm-heading-font-family: "InterVariable";
   --ifm-navbar-link-hover-color: #06b6d4; /* Cyan 500 */
   --ifm-menu-color-active: #06b6d4; /* Cyan 500 - Active text in sidebar */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
@@ -16,8 +19,9 @@
 
 @supports (font-variation-settings: normal) {
   :root {
-    --ifm-font-family-base: InterVariable;
-    --ifm-heading-font-family: InterVariable;
+    --ifm-font-family-base: InterVariable, var(--ifm-font-family-base-fallback);
+    --ifm-heading-font-family: InterVariable,
+      var(--ifm-font-family-base-fallback);
   }
 }