fix: address font not always loading bug

components/Layout.tsx

@@ -9,19 +9,25 @@ interface Props {
   children: ReactNode
 }
 
-const inter = Inter({
-  subsets: ['latin'],
-})
+const inter = Inter({ subsets: ['latin'], display: 'swap', adjustFontFallback: false })
 
 const LayoutWrapper = ({ children }: Props) => {
   return (
-    <SectionContainer>
-      <div className={`${inter.className} flex h-screen flex-col justify-between`}>
-        <Header />
-        <main className="grow">{children}</main>
-        <Footer />
-      </div>
-    </SectionContainer>
+    <>
+      <style jsx global>{`
+        html {
+          font-family: ${inter.style.fontFamily};
+        }
+      `}</style>
+
+      <SectionContainer>
+        <div className={`${inter.className} flex h-screen flex-col justify-between`}>
+          <Header />
+          <main className="grow">{children}</main>
+          <Footer />
+        </div>
+      </SectionContainer>
+    </>
   )
 }