Add custom fonts

emestabillo · Aug 7, 2021 · a744328 · a744328
1 parent 1f89611
commit a744328
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 5 deletions.
diff --git a/.babelrc b/.babelrc
@@ -13,4 +13,4 @@
       }
     ]
   ]
-}
+}
diff --git a/pages/_app.js b/pages/_app.js
@@ -9,10 +9,6 @@ function MyApp({ Component, pageProps, router }) {
       <Head>
         <title>Planets Fact Site</title>
         <meta name="description" content="facts about planets" />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Antonio:wght@500&family=Spartan:wght@400;700&display=swap"
-          rel="stylesheet"
-        />
       </Head>
       <GlobalStyle />
       <Layout>

diff --git a/public/fonts/antonio-regular-webfont.woff b/public/fonts/antonio-regular-webfont.woff
diff --git a/public/fonts/antonio-regular-webfont.woff2 b/public/fonts/antonio-regular-webfont.woff2
diff --git a/public/fonts/spartanmb-bold-webfont.woff b/public/fonts/spartanmb-bold-webfont.woff
diff --git a/public/fonts/spartanmb-bold-webfont.woff2 b/public/fonts/spartanmb-bold-webfont.woff2
diff --git a/public/fonts/spartanmb-medium-webfont.woff b/public/fonts/spartanmb-medium-webfont.woff
diff --git a/public/fonts/spartanmb-medium-webfont.woff2 b/public/fonts/spartanmb-medium-webfont.woff2
diff --git a/shared/Globalstyles.js b/shared/Globalstyles.js
@@ -1,7 +1,38 @@
 import { createGlobalStyle } from "styled-components";
 import { COLORS } from "../shared/constants";
 
+const Antonio = "/fonts/antonio-regular-webfont.woff";
+const Antonio2 = "/fonts/antonio-regular-webfont.woff2";
+const SpartanBold = "/fonts/spartanmb-bold-webfont.woff";
+const SpartanBold2 = "/fonts/spartanmb-bold-webfont.woff2";
+const SpartanMed = "/fonts/spartanmb-medium-webfont.woff";
+const SpartanMed2 = "/fonts/spartanmb-medium-webfont.woff2";
+
 const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: 'Antonio';
+    src: url(${Antonio2}) format('woff2'),
+    url(${Antonio}) format('woff');
+    font-weight: 500;
+    font-style: medium;
+  }
+
+  @font-face {
+    font-family: 'Spartan';
+    src: url(${SpartanMed2}) format('woff2'),
+    url(${SpartanMed}) format('woff');
+    font-weight: 400;
+    font-style: regular;
+  }
+
+  @font-face {
+    font-family: 'Spartan';
+    src: url(${SpartanBold2}) format('woff2'),
+    url(${SpartanBold}) format('woff');
+    font-weight: 700;
+    font-style: bold;
+  }
+  
 *,
 *::before,
 *::after {
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,4 +13,4 @@ @@
           }
         ]
       ]
-    }
+    }