✨ feat: add new font and update theme

src/components/molecules/Hero/Hero.tsx

@@ -25,19 +25,17 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
       }}>
       <Box
         sx={theme => ({
-          maxWidth: '95%',
-          marginRight: '1%',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           gap: '3em',
 
-          [theme.breakpoints.down('sm')]: {
+          [theme.breakpoints.down('md')]: {
             flexDirection: 'column',
             textAlign: 'center',
-            padding: '3em',
+            padding: '2em',
           },
-          [theme.breakpoints.up('sm')]: {
+          [theme.breakpoints.up('md')]: {
             flexDirection: 'row',
             textAlign: 'right',
             padding: '6em',

src/main.tsx

@@ -1,4 +1,13 @@
 /* istanbul ignore file */
+import '@fontsource/oswald/700.css'
+import '@fontsource/oswald/500.css'
+import '@fontsource/oswald/400.css'
+import '@fontsource/oswald/300.css'
+import '@fontsource/inter/700.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/300.css'
+
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { AnalyticsProvider } from 'use-analytics'

src/style/theme.ts

@@ -1,8 +1,29 @@
 /* istanbul ignore file */
-import { createTheme } from '@mui/material/styles'
-
+import { createTheme, responsiveFontSizes } from '@mui/material/styles'
 // A custom theme for this app
-const theme = createTheme({
+let theme = createTheme({
+  typography: {
+    fontFamily: 'Inter, sans-serif', // Base font for headings
+
+    h1: {
+      fontFamily: 'Oswald, sans-serif',
+      textTransform: 'uppercase',
+      fontWeight: 700,
+    },
+    h2: {
+      fontFamily: 'Oswald, sans-serif',
+      textTransform: 'uppercase',
+      fontWeight: 700,
+    },
+    h3: {
+      fontFamily: 'Oswald, sans-serif',
+      fontWeight: 700,
+    },
+    h4: {
+      fontFamily: 'Oswald, sans-serif',
+      fontWeight: 700,
+    },
+  },
   palette: {
     mode: 'dark',
     primary: {
@@ -18,4 +39,6 @@ const theme = createTheme({
   },
 })
 
+theme = responsiveFontSizes(theme)
+
 export default theme