🎨 ✨ use @next/font

use @next/font **Intentions:** - 🎨 - Improve format/structure - ✨ - New feature
TimMikeladze · Jan 23, 2023 · 3b7c611 · 3b7c611 · vercel · Jan 23, 2023
1 parent 814eaed
commit 3b7c611
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -8,6 +8,7 @@ import { useApollo } from '@/graphql/apollo';
 import { ApolloProvider } from '@apollo/client';
 import AppPage from '@/components/AppPage';
 import { DefaultSeo } from 'next-seo';
+import { appFont } from '@/theme';
 
 const MyApp = ({
   Component,
@@ -22,6 +23,11 @@ const MyApp = ({
 
   return (
     <>
+      <style jsx global>{`
+        * {
+          font-family: ${appFont.style.fontFamily}, sans-serif !important;
+        }
+      `}</style>
       <DefaultSeo title={t(`seoTitle`)} description={t(`seoDescription`)} />
       <ApolloProvider client={apollo}>
         <SessionProvider session={session}>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -5,13 +5,7 @@ export default class MyDocument extends Document {
   render() {
     return (
       <Html>
-        <Head>
-          <link rel="preconnect" href="https://fonts.bunny.net" />
-          <link
-            href="https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900"
-            rel="stylesheet"
-          />
-        </Head>
+        <Head />
         <body>
           {getInitColorSchemeScript()}
           <Main />

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -6,7 +6,6 @@ body {
 
 * {
   box-sizing: border-box;
-  font-family: 'Inter', sans-serif !important;
 }
 
 a {

diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -1,3 +1,10 @@
 import { extendTheme } from '@mui/joy';
 
+import { Inter } from '@next/font/google';
+
+export const appFont = Inter({
+  // eslint-disable-next-line @typescript-eslint/quotes
+  subsets: ['latin'],
+});
+
 export const appTheme = extendTheme({});