1212 Added Montserrat as a global font family (#1223)

* 1212 Added Montserrat as a global font family Removed all other fonts Added next/font from nextjs 13, which has automatic optimizations * 1212 Added subset to montserrat font config * 1212 Added cyrillic subset and changed font display type
podkrepi-bg · Dec 2, 2022 · 0d4035b · 0d4035b
1 parent d06ce0e
commit 0d4035b
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 120 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@mui/styles": "^5.10.14",
     "@mui/x-data-grid": "^5.17.2",
     "@mui/x-date-pickers": "^5.0.8",
+    "@next/font": "^13.0.5",
     "@paypal/react-paypal-js": "^7.8.1",
     "@react-pdf/renderer": "^3.0.1",
     "@sentry/nextjs": "7.21.1",
@@ -51,7 +52,7 @@
     "lodash": "^4.17.21",
     "mobx": "6.3.2",
     "mobx-react": "7.2.0",
-    "next": "^13.0.4",
+    "next": "^13.0.5",
     "next-auth": "^4.16.4",
     "next-i18next": "^13.0.0",
     "nookies": "^2.5.2",

diff --git a/src/common/theme.ts b/src/common/theme.ts
@@ -7,7 +7,12 @@ import {
   ThemeOptions,
 } from '@mui/material/styles'
 
-const fontFamily = 'Montserrat'
+import { Montserrat } from '@next/font/google'
+
+export const montserrat = Montserrat({
+  display: 'auto',
+  subsets: ['latin', 'cyrillic'],
+})
 
 // Instead of exporting `colors` variable use theme:
 // import theme from 'common/theme'
@@ -179,22 +184,15 @@ export const themeOptions: ThemeOptions = {
   },
 
   typography: {
-    h1: { fontFamily },
-    h2: { fontFamily },
-    h3: { fontFamily, color: colors.blue.dark },
-    h4: { fontFamily },
-    h5: { fontFamily },
-    h6: { fontFamily },
-    subtitle1: { fontFamily },
-    subtitle2: { fontFamily },
+    fontFamily: montserrat.style.fontFamily,
+    h3: { color: colors.blue.dark },
+
     body1: {
       fontSize: '0.875rem',
       lineHeight: '1.43',
       letterSpacing: '0.01071em',
-      fontFamily,
     },
-    body2: { fontFamily },
-    button: { fontFamily, textTransform: 'initial' },
+    button: { textTransform: 'initial' },
   },
 }
 // https://material-ui.com/customization/default-theme/#default-theme

diff --git a/src/components/auth/profile/CertificatesTab.tsx b/src/components/auth/profile/CertificatesTab.tsx
@@ -33,7 +33,6 @@ const Root = styled('div')(({ theme }) => ({
     margin: 0,
   },
   [`& .${classes.smallText}`]: {
-    fontFamily: 'Lato, sans-serif',
     fontStyle: 'normal',
     fontWeight: '500',
     fontSize: '15px',

diff --git a/src/components/auth/profile/DisableAccountModal.tsx b/src/components/auth/profile/DisableAccountModal.tsx
@@ -44,18 +44,12 @@ const StyledModal = styled(Modal)(({ theme }) => ({
     },
   },
   [`& .${classes.subtitle}`]: {
-    fontFamily: 'Lato, sans-serif',
-    fontStyle: 'normal',
-    fontWeight: '400',
     fontSize: theme.typography.pxToRem(14),
     lineHeight: theme.spacing(3),
     color: theme.palette.primary.main,
     margin: theme.spacing(1, 0),
   },
   [`& .${classes.graySpan}`]: {
-    fontFamily: 'Lato, sans-serif',
-    fontStyle: 'normal',
-    fontWeight: '400',
     fontSize: theme.typography.pxToRem(14),
     lineHeight: '133.4%',
     color: '#909090',
@@ -65,7 +59,6 @@ const StyledModal = styled(Modal)(({ theme }) => ({
     },
   },
   [`& .${classes.irrevirsibleAction}`]: {
-    fontFamily: 'Lato, sans-serif',
     fontStyle: 'normal',
     fontWeight: '400',
     fontSize: theme.typography.pxToRem(14),

diff --git a/src/components/auth/profile/MyCampaignsTab.tsx b/src/components/auth/profile/MyCampaignsTab.tsx
@@ -35,7 +35,6 @@ const Root = styled('div')(({ theme }) => ({
     margin: 0,
   },
   [`& .${classes.smallText}`]: {
-    fontFamily: 'Lato, sans-serif',
     fontStyle: 'normal',
     fontWeight: '500',
     fontSize: '15px',

diff --git a/src/components/auth/profile/PersonalInfoTab.tsx b/src/components/auth/profile/PersonalInfoTab.tsx
@@ -54,7 +54,6 @@ const Root = styled('div')(({ theme }) => ({
   },
 
   [`& .${classes.graySpan}`]: {
-    fontFamily: 'Lato, sans-serif',
     fontStyle: 'normal',
     fontWeight: '400',
     fontSize: '18px',
@@ -63,7 +62,6 @@ const Root = styled('div')(({ theme }) => ({
   },
 
   [`& .${classes.h5}`]: {
-    fontFamily: 'Lato, sans-serif',
     fontStyle: 'normal',
     fontWeight: '600',
     fontSize: '22px',

diff --git a/src/components/campaigns/CampaignDetails.tsx b/src/components/campaigns/CampaignDetails.tsx
@@ -98,7 +98,6 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
   ['& .ql-editor']: {
     fontSize: theme.spacing(2),
     fontWeight: 500,
-    fontFamily: 'Montserrat',
     lineHeight: theme.spacing(4),
     paddingLeft: '0',
     paddingRight: '0',

diff --git a/src/components/common/FormFieldButton.tsx b/src/components/common/FormFieldButton.tsx
@@ -55,7 +55,6 @@ const Root = styled('div')(({ theme }) => ({
     fontSize: '1rem',
     lineHeight: '1.4375em',
     letterSpacing: '0.01071em',
-    fontFamily: theme.typography.fontFamily,
     fontWeight: 400,
     padding: 0,
   },

diff --git a/src/components/countries/grid/CountryGrid.tsx b/src/components/countries/grid/CountryGrid.tsx
@@ -22,7 +22,6 @@ const classes = {
 const Root = styled('div')({
   [`& .${classes.gridColumn}`]: {
     '& .MuiDataGrid-columnHeaderTitle': {
-      fontFamily: 'Roboto',
       fontSize: '14px',
       fontWeight: '700',
     },

diff --git a/src/components/expenses/grid/Grid.tsx b/src/components/expenses/grid/Grid.tsx
@@ -33,12 +33,10 @@ const Root = styled('div')({
       marginTop: '30px',
       marginRight: '40px',
     },
-    fontFamily: 'Lato',
     fontSize: '12px',
   },
   [`& .${classes.gridColumn}`]: {
     '& .MuiDataGrid-columnHeaderTitle': {
-      fontFamily: 'Roboto',
       fontSize: '14px',
       fontWeight: '700',
     },

diff --git a/src/components/index/IndexPage.styled.tsx b/src/components/index/IndexPage.styled.tsx
@@ -14,7 +14,6 @@ export const Heading = styled(Typography)(() => ({
 export const InfoText = styled(Typography)(() => ({
   display: 'inline-block',
   textAlign: 'center',
-  fontFamily: 'Montserrat',
   fontSize: theme.typography.pxToRem(16),
   lineHeight: theme.spacing(3),
   paddingBottom: theme.spacing(6),

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,21 +1,21 @@
-import Head from 'next/head'
-import { AppProps } from 'next/app'
-import { useRouter } from 'next/router'
 import { EmotionCache } from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
-import React, { useEffect, useState } from 'react'
-import { appWithTranslation, useTranslation } from 'next-i18next'
-import { ThemeProvider, Theme } from '@mui/material/styles'
 import { CssBaseline } from '@mui/material'
+import { Theme, ThemeProvider } from '@mui/material/styles'
 import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { appWithTranslation, useTranslation } from 'next-i18next'
+import { AppProps } from 'next/app'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 
+import createEmotionCache from 'common/createEmotionCache'
 import theme from 'common/theme'
 import useGTM from 'common/util/useGTM'
-import createEmotionCache from 'common/createEmotionCache'
 
-import 'styles/global.scss'
-import { queryFn } from 'service/restRequests'
 import { SessionProvider } from 'next-auth/react'
+import { queryFn } from 'service/restRequests'
+import 'styles/global.scss'
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache()
@@ -28,6 +28,7 @@ declare module '@mui/styles/defaultTheme' {
 interface CustomAppProps extends AppProps {
   emotionCache?: EmotionCache
 }
+
 function CustomApp({
   Component,
   emotionCache = clientSideEmotionCache,

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -14,11 +14,7 @@ export default class CustomDocument extends Document {
         <Head>
           {/* PWA primary color */}
           <meta name="theme-color" content={theme.palette.primary.main} />
-          <link rel="preconnect" href="https://fonts.gstatic.com" />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Lato&display=swap"
-            rel="stylesheet"
-          />
+
           <FaviconMetadata />
           {/* Inject MUI styles first to match with the prepend: true configuration. */}
           {(this.props as any).emotionStyleTags}