diff --git a/beta/src/components/Seo.tsx b/beta/src/components/Seo.tsx
index 4af7bdd8..2559b6ad 100644
--- a/beta/src/components/Seo.tsx
+++ b/beta/src/components/Seo.tsx
@@ -89,7 +89,20 @@ export const Seo = withRouter(
         type="font/woff2"
         crossOrigin="anonymous"
       />
-
+      <link
+        rel="preload"
+        href="https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
+      <link
+        rel="preload"
+        href="https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
       {children}
     </Head>
   )
diff --git a/beta/src/pages/_app.tsx b/beta/src/pages/_app.tsx
index 6b265c5d..df1e15f2 100644
--- a/beta/src/pages/_app.tsx
+++ b/beta/src/pages/_app.tsx
@@ -8,7 +8,6 @@ import {useRouter} from 'next/router';
 // @ts-ignore
 import galite from 'ga-lite';
 import '@docsearch/css';
-import '../styles/fonts.css';
 import '../styles/algolia.css';
 import '../styles/index.css';
 import '../styles/sandpack.css';
diff --git a/beta/src/styles/fonts.css b/beta/src/styles/fonts.css
deleted file mode 100644
index b746c757..00000000
--- a/beta/src/styles/fonts.css
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Copyright (c) Facebook, Inc. and its affiliates.
- */
-
-@font-face {
-  font-family: 'Source Code Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Optimistic Display';
-  src: url('https://conf.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2')
-    format('woff2');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Optimistic Display';
-  src: url('https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2')
-    format('woff2');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Optimistic Display';
-  src: url('https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2')
-    format('woff2');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
index 99ea371e..3ced00e7 100644
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@@ -15,6 +15,33 @@
     src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
   }
 
+  @font-face {
+    font-family: 'Optimistic Display';
+    src: url('https://conf.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2')
+      format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Optimistic Display';
+    src: url('https://conf.reactjs.org/fonts/Optimistic_Display_W_Md.woff2')
+      format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Optimistic Display';
+    src: url('https://conf.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2')
+      format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+
   /* Write your own custom base styles here */
   html {
     color-scheme: light;