Cache a font file (#4350)

* Cache a font file

* Fix vercel.json syntax

* Improve

* Fix fonts

Co-authored-by: dan <dan.abramov@gmail.com>

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>

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 {

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 */

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"
+        }
+      ]
+    }
   ]
 }