Add fonts

SmileyJames · Jun 28, 2021 · 99bc5d0 · 99bc5d0
1 parent c2b2369
commit 99bc5d0
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/app/public/index.html b/app/public/index.html
@@ -25,6 +25,9 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Compendium Games</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Roboto&display=swap" rel="stylesheet"> 
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/app/src/components/navbar/NavBar.js b/app/src/components/navbar/NavBar.js
@@ -18,7 +18,7 @@ function NavLink({ children, onKeyPress, onClick, href="#", ...rest }) {
   return (
     <Flex {...rest} py={2} px={3}>
       <Link
-        fontFamily="body"
+        fontFamily="heading"
         variant="nav"
         onClick={onClick && prepareHandler(onClick)}
         onKeyPress={onKeyPress && prepareHandler(onKeyPress)}

diff --git a/app/src/components/typed-banner/TypedBanner.js b/app/src/components/typed-banner/TypedBanner.js
@@ -3,7 +3,7 @@ import { Heading, Flex } from "rebass/styled-components";
 
 const TypedBanner = ({ typedSentences, stopped = false }) => (
   <Flex px="20%" py={5} my={4} backgroundColor="secondary">
-    <Heading fontFamily="body" color="muted" sx={{ userSelect: "none" }}>
+    <Heading color="muted" sx={{ userSelect: "none" }}>
       <ReactTyped
         strings={typedSentences}
         typeSpeed={50}

diff --git a/app/src/theme.js b/app/src/theme.js
@@ -1,2 +1,10 @@
 import base from '@rebass/preset'
+import merge from "lodash/merge";
+
+merge(base, {
+  fonts: {
+    heading: "'Montserrat', sans-serif",
+    body: "'Roboto', sans-serif",
+  }
+})
 export default base;