Consolidate and preload fonts

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>
   )

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';

beta/src/styles/fonts.css

@@ -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;
-}

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;