diff --git a/beta/public/fonts/Source-Code-Pro-Regular.woff2 b/beta/public/fonts/Source-Code-Pro-Regular.woff2
new file mode 100644
index 00000000..655cd9e8
Binary files /dev/null and b/beta/public/fonts/Source-Code-Pro-Regular.woff2 differ
diff --git a/beta/public/fonts/SourceCodePro-Regular.ttf b/beta/public/fonts/SourceCodePro-Regular.ttf
deleted file mode 100644
index 3563e734..00000000
Binary files a/beta/public/fonts/SourceCodePro-Regular.ttf and /dev/null differ
diff --git a/beta/src/components/Seo.tsx b/beta/src/components/Seo.tsx
index 35cf668e..4af7bdd8 100644
--- a/beta/src/components/Seo.tsx
+++ b/beta/src/components/Seo.tsx
@@ -82,6 +82,13 @@ export const Seo = withRouter(
         key="twitter:image"
         content={`https://beta.reactjs.org${image}`}
       />
+      <link
+        rel="preload"
+        href="/fonts/Source-Code-Pro-Regular.woff2"
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+      />
 
       {children}
     </Head>
diff --git a/beta/src/styles/fonts.css b/beta/src/styles/fonts.css
index aa7136e7..ff6f5e47 100644
--- a/beta/src/styles/fonts.css
+++ b/beta/src/styles/fonts.css
@@ -7,7 +7,8 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url('/fonts/SourceCodePro-Regular.ttf') format('truetype');
+  src: local('Source Code Pro'),
+    url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
 }
 
 @font-face {
diff --git a/beta/src/styles/index.css b/beta/src/styles/index.css
index 13b6743e..651b3538 100644
--- a/beta/src/styles/index.css
+++ b/beta/src/styles/index.css
@@ -12,7 +12,8 @@
     font-style: normal;
     font-weight: 400;
     font-display: swap;
-    src: url('/fonts/SourceCodePro-Regular.ttf') format('truetype');
+    src: local('Source Code Pro'),
+      url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
   }
 
   /* Write your own custom base styles here */
diff --git a/beta/vercel.json b/beta/vercel.json
index 94a7782c..1e94a9b5 100644
--- a/beta/vercel.json
+++ b/beta/vercel.json
@@ -254,5 +254,16 @@
       "destination": "https://5a046bf5a6188f4b8fa4938a--reactjs.netlify.com",
       "permanent": false
     }
+  ],
+  "headers": [
+    {
+      "source": "/fonts/(.*).woff2",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
   ]
 }