load all fonts locally

holtzy · Sep 26, 2023 · 9052d18 · 9052d18
1 parent 4b55c2a
commit 9052d18
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -10,5 +10,45 @@ export const onRenderBody = ({ setHeadComponents }) => {
       crossOrigin="anonymous"
       key="robotoRegular"
     />,
+    <link
+      rel="preload"
+      href="/fonts/roboto-v30-latin/roboto-v30-latin-italic.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+      key="robotoItalic"
+    />,
+    <link
+      rel="preload"
+      href="/fonts/roboto-v30-latin/roboto-v30-latin-700.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+      key="roboto700"
+    />,
+    <link
+      rel="preload"
+      href="/fonts/bitter-v33-latin/bitter-v33-latin-regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+      key="bitterRegular"
+    />,
+    <link
+      rel="preload"
+      href="/fonts/bitter-v33-latin/bitter-v33-latin-italic.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+      key="bitterItalic"
+    />,
+    <link
+      rel="preload"
+      href="/fonts/bitter-v33-latin/bitter-v33-latin-700.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+      key="bitter700"
+    />,
   ]);
 };
diff --git a/src/styles/style.css b/src/styles/style.css
@@ -39,7 +39,7 @@ gatsby tutorial: https://www.gatsbyjs.com/docs/how-to/styling/using-local-fonts/
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: url(fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2)
+  src: url(/fonts/roboto-v30-latin/roboto-v30-latin-regular.woff2)
     format('woff2');
 }
 /* roboto-italic - latin */
@@ -48,23 +48,24 @@ gatsby tutorial: https://www.gatsbyjs.com/docs/how-to/styling/using-local-fonts/
   font-family: 'Roboto';
   font-style: italic;
   font-weight: 400;
-  src: url(fonts/roboto-v30-latin/roboto-v30-latin-italic.woff2) format('woff2');
+  src: url(/fonts/roboto-v30-latin/roboto-v30-latin-italic.woff2)
+    format('woff2');
 }
 /* roboto-700 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
-  src: url(fonts/roboto-v30-latin/roboto-v30-latin-700.woff2) format('woff2');
+  src: url(/fonts/roboto-v30-latin/roboto-v30-latin-700.woff2) format('woff2');
 }
 /* bitter-regular - latin */
 @font-face {
   font-display: swap;
   font-family: 'Bitter';
   font-style: normal;
   font-weight: 400;
-  src: url(fonts/bitter-v33-latin/bitter-v33-latin-regular.woff2)
+  src: url(/fonts/bitter-v33-latin/bitter-v33-latin-regular.woff2)
     format('woff2');
 }
 /* bitter-italic - latin */
@@ -73,15 +74,16 @@ gatsby tutorial: https://www.gatsbyjs.com/docs/how-to/styling/using-local-fonts/
   font-family: 'Bitter';
   font-style: italic;
   font-weight: 400;
-  src: url(fonts/bitter-v33-latin/bitter-v33-latin-italic.woff2) format('woff2');
+  src: url(/fonts/bitter-v33-latin/bitter-v33-latin-italic.woff2)
+    format('woff2');
 }
 /* bitter-700 - latin */
 @font-face {
   font-display: swap;
   font-family: 'Bitter';
   font-style: normal;
   font-weight: 700;
-  src: url(fonts/bitter-v33-latin/bitter-v33-latin-700.woff2) format('woff2');
+  src: url(/fonts/bitter-v33-latin/bitter-v33-latin-700.woff2) format('woff2');
 }
 
 /* ---------- Global CSS ----------------- */