chore: use variant for font family override

ethereum · Dec 30, 2021 · 4681d22 · 4681d22
1 parent 71c7d73
commit 4681d22
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/src/components/UI/headings/PageSection.tsx b/src/components/UI/headings/PageSection.tsx
@@ -9,8 +9,8 @@ export const PageSection: FC<HeadingProps> = ({ children, ...props }) => {
       fontSize='22px'
       fontWeight={700}
       lineHeight='29px'
-      className='maison-neue-mono'
       textAlign='center'
+      variant='page-section'
       {...props}
     >
       {children}

diff --git a/src/global.css b/src/global.css
@@ -7,7 +7,3 @@
     url('./public/fonts/MaisonNeueMono-Bold.woff2') format('woff2'),
     url('./public/fonts/MaisonNeueMono-Bold.woff') format('woff');
 }
-
-.maison-neue-mono {
-  font-family: 'Maison Neue Mono' !important;
-}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import { ChakraProvider } from '@chakra-ui/react';
 import '@fontsource/libre-franklin/200.css';
 import '@fontsource/libre-franklin/300.css';
 import '@fontsource/libre-franklin/400.css';
+import '@fontsource/libre-franklin/700.css';
 import type { AppProps } from 'next/app';
 import '../global.css';
 import theme from '../theme';

diff --git a/src/theme.ts b/src/theme.ts
@@ -16,11 +16,21 @@ export default extendTheme({
   fontSizes: {
     h1: '40px',
     h2: '24px',
+    h4: '18px',
     paragraph: '15px'
   },
   sizes: {
     container: {
       mobile: '450px'
     }
+  },
+  components: {
+    Heading: {
+      variants: {
+        'page-section': {
+          fontFamily: `Maison Neue Mono, ${base.fonts?.heading}`
+        }
+      }
+    }
   }
 });