fix font loading

components/Layout.tsx

@@ -23,7 +23,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
 
   return (
     <main
-      className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} ${themeData.fonts.mono.variable} font-sans bg-th-primary-2`}
+      className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} font-sans bg-th-primary-2`}
     >
       <SunburstBackground className="text-th-primary-1" />
       <div className={`relative min-h-screen`}>

components/shared/Modal.tsx

@@ -48,8 +48,6 @@ function Modal({
         <Dialog.Panel
           className={`${themeData.fonts.body.variable} ${
             themeData.fonts.display.variable
-          } ${
-            themeData.fonts.mono.variable
           } font-sans h-full w-full bg-th-bkg-1 font-body ${
             fullScreen
               ? ''

components/shared/Tooltip.tsx

@@ -35,7 +35,7 @@ const Tooltip = ({
         content={
           content ? (
             <div
-              className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} ${themeData.fonts.mono.variable} font-sans font-sans rounded-md bg-th-bkg-2 p-3 font-body text-xs leading-4 text-th-fgd-3 outline-none focus:outline-none ${className}`}
+              className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} font-sans font-sans rounded-md bg-th-bkg-2 p-3 font-body text-xs leading-4 text-th-fgd-3 outline-none focus:outline-none ${className}`}
               style={{ boxShadow: '0px 0px 8px 0px rgba(0,0,0,0.25)' }}
             >
               {content}

types/index.ts

@@ -396,7 +396,6 @@ export interface ThemeData {
   fonts: {
     body: any
     display: any
-    mono: any
   }
   logoPath: string
 }

utils/fonts.ts

@@ -1,30 +1,15 @@
-import { Lalezar, Nunito, Roboto, Roboto_Mono } from 'next/font/google'
-
-export const lalezar = Lalezar({
-  weight: '400',
-  subsets: ['latin'],
-  variable: '--font-display',
-})
-
-export const robotoFlex = Roboto({
-  weight: ['400', '500', '700', '900'],
-  subsets: ['latin'],
-  variable: '--font-body',
-})
+import { Nunito } from 'next/font/google'
 
 export const nunitoDisplay = Nunito({
   weight: '900',
   subsets: ['latin'],
   variable: '--font-display',
+  display: 'swap',
 })
 
 export const nunito = Nunito({
   weight: ['400', '500', '700', '900'],
   subsets: ['latin'],
   variable: '--font-body',
-})
-
-export const robotoMono = Roboto_Mono({
-  subsets: ['latin'],
-  variable: '--font-mono',
+  display: 'swap',
 })

utils/theme.ts

@@ -1,5 +1,5 @@
 import { ThemeData } from 'types'
-import { lalezar, nunito, nunitoDisplay, robotoFlex, robotoMono } from './fonts'
+import { nunito, nunitoDisplay } from './fonts'
 
 export const breakpoints = {
   sm: 640,
@@ -30,7 +30,6 @@ export const themeData: Theme = {
     fonts: {
       body: nunito,
       display: nunitoDisplay,
-      mono: robotoMono,
     },
     logoPath: '/logos/boost.svg',
   },