chore: self host fonts

apotdevin · Apr 3, 2022 · d119739 · d119739
1 parent ccbc181
commit d119739
Show file tree

Hide file tree

Showing 14 changed files with 157 additions and 4 deletions.
diff --git a/src/client/pages/_document.tsx b/src/client/pages/_document.tsx
@@ -45,9 +45,89 @@ export default class MyDocument extends Document {
             key="description"
           />
           <link
-            href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&display=swap"
-            rel="stylesheet"
-          ></link>
+            rel="preload"
+            href="/fonts/roboto/Roboto-Thin.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-ThinItalic.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-Light.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-LightItalic.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-Regular.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-Italic.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-Medium.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-MediumItalic.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-Bold.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-BoldItalic.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-Black.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
+          <link
+            rel="preload"
+            href="/fonts/roboto/Roboto-BlackItalic.ttf"
+            as="font"
+            type="font/ttf"
+            crossOrigin=""
+          />
         </Head>
         <body>
           <Main />

diff --git a/src/client/public/fonts/roboto/Roboto-Black.ttf b/src/client/public/fonts/roboto/Roboto-Black.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-BlackItalic.ttf b/src/client/public/fonts/roboto/Roboto-BlackItalic.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-Bold.ttf b/src/client/public/fonts/roboto/Roboto-Bold.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-BoldItalic.ttf b/src/client/public/fonts/roboto/Roboto-BoldItalic.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-Italic.ttf b/src/client/public/fonts/roboto/Roboto-Italic.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-Light.ttf b/src/client/public/fonts/roboto/Roboto-Light.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-LightItalic.ttf b/src/client/public/fonts/roboto/Roboto-LightItalic.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-Medium.ttf b/src/client/public/fonts/roboto/Roboto-Medium.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-MediumItalic.ttf b/src/client/public/fonts/roboto/Roboto-MediumItalic.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-Regular.ttf b/src/client/public/fonts/roboto/Roboto-Regular.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-Thin.ttf b/src/client/public/fonts/roboto/Roboto-Thin.ttf
diff --git a/src/client/public/fonts/roboto/Roboto-ThinItalic.ttf b/src/client/public/fonts/roboto/Roboto-ThinItalic.ttf
diff --git a/src/client/src/styles/GlobalStyle.ts b/src/client/src/styles/GlobalStyle.ts
@@ -2,6 +2,79 @@ import { createGlobalStyle } from 'styled-components';
 import { backgroundColor, textColor } from './Themes';
 
 export const GlobalStyles = createGlobalStyle`
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-Thin.ttf') format('truetype');
+        font-weight: 100;
+        font-style: normal;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-ThinItalic.ttf') format('truetype');
+        font-weight: 100;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-Light.ttf') format('truetype');
+        font-weight: 300;
+        font-style: normal;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-LightItalic.ttf') format('truetype');
+        font-weight: 300;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-Regular.ttf') format('truetype');
+        font-weight: 400;
+        font-style: normal;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-Italic.ttf') format('truetype');
+        font-weight: 400;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-Medium.ttf') format('truetype');
+        font-weight: 500;
+        font-style: normal;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-MediumItalic.ttf') format('truetype');
+        font-weight: 500;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-Bold.ttf') format('truetype');
+        font-weight: 700;
+        font-style: normal;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-BoldItalic.ttf') format('truetype');
+        font-weight: 700;
+        font-style: italic;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-Black.ttf') format('truetype');
+        font-weight: 900;
+        font-style: normal;
+    }
+    @font-face {
+        font-family: 'Roboto';
+        src: url('/fonts/roboto/Roboto-BlackItalic.ttf') format('truetype');
+        font-weight: 900;
+        font-style: italic;
+    }
+
     html, body {
         margin: 0;
         padding: 0;
@@ -12,7 +85,7 @@ export const GlobalStyles = createGlobalStyle`
     body {
         background: ${backgroundColor};
         color: ${textColor};
-        font-family: 'Manrope', sans-serif;
+        font-family: 'Roboto', sans-serif;
         text-rendering: optimizeLegibility;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;