From ba18ef45f20d757508f1f497ff6b5eb428eb828d Mon Sep 17 00:00:00 2001
From: thebeyondr <19380973+thebeyondr@users.noreply.github.com>
Date: Wed, 7 Oct 2026 19:28:20 -0500
Subject: [PATCH] fix(fonts): self-host Inter and drop the unused Roboto Mono
 link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inter was loaded from Google Fonts with display=optional, so on a slow
first load the browser kept the system-ui fallback for the entire page
view and the brand font never appeared. Roboto Mono was fetched on every
page but no design token references it ($mono is Söhne Mono, menlo), so
the request was pure waste.

Load Inter from @fontsource/inter instead (latin 400-700, the only
weights in use). The design system's $body token already names Inter
first, so no token or globalStyles change is needed, and the
third-party render-blocking stylesheet request goes away.
---
 package.json        | 1 +
 pages/_app.tsx      | 4 ++++
 pages/_document.tsx | 8 --------
 pnpm-lock.yaml      | 8 ++++++++
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 8e25d4d3..9d096f49 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "@apollo/client": "3.13.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@fontsource/inter": "^5.3.0",
     "@graphql-tools/wrap": "8.5.0",
     "@livepeer/design-system": "1.2.0",
     "@mui/material": "^7.3.11",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index a1741ce1..f20c10b9 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,3 +1,7 @@
+import "@fontsource/inter/latin-400.css";
+import "@fontsource/inter/latin-500.css";
+import "@fontsource/inter/latin-600.css";
+import "@fontsource/inter/latin-700.css";
 import "@rainbow-me/rainbowkit/styles.css";
 import "../styles/globals.css";
 
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 29d56cf0..80342d88 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -6,14 +6,6 @@ export default class Document extends NextDocument {
     return (
       <Html lang="en">
         <Head>
-          <link
-            href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=optional"
-            rel="stylesheet"
-          />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=optional"
-            rel="stylesheet"
-          />
           <style
             id="stitches"
             dangerouslySetInnerHTML={{ __html: getCssText() }}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 903b32d1..f6f33d38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,9 @@ importers:
       '@emotion/styled':
         specifier: ^11.14.1
         version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.1))(@types/react@19.2.2)(react@19.2.1)
+      '@fontsource/inter':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@graphql-tools/wrap':
         specifier: 8.5.0
         version: 8.5.0(graphql@16.14.2)
@@ -1246,6 +1249,9 @@ packages:
   '@floating-ui/utils@0.2.12':
     resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
+  '@fontsource/inter@5.3.0':
+    resolution: {integrity: sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==}
+
   '@formatjs/ecma402-abstract@2.3.6':
     resolution: {integrity: sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==}
 
@@ -11276,6 +11282,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.12': {}
 
+  '@fontsource/inter@5.3.0': {}
+
   '@formatjs/ecma402-abstract@2.3.6':
     dependencies:
       '@formatjs/fast-memoize': 2.2.7