perf(ui): use fonts from next/font/google

fix #589
mateusfg7 · Jul 18, 2023 · 2ba632b · 2ba632b
1 parent 3a2d9f2
commit 2ba632b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import { Chivo_Mono, Inter } from 'next/font/google'
 import { config } from 'global-config'
 
 import { Providers } from './providers'
@@ -25,6 +26,19 @@ export const metadata: Metadata = {
   }
 }
 
+const chivoMono = Chivo_Mono({
+  subsets: ['latin'],
+  weight: ['500'],
+  variable: '--font-chivo-mono',
+  display: 'swap'
+})
+const inter = Inter({
+  subsets: ['latin'],
+  weight: ['200', '300', '400', '500', '600', '700', '900'],
+  variable: '--font-inter',
+  display: 'swap'
+})
+
 export default function RootLayout({
   children
 }: {
@@ -33,18 +47,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="scroll-smooth">
       <head>
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin="anonymous"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@500&family=Source+Sans+Pro:wght@300;400;600&family=Inter:wght@200;300;400;500;600;700;900&display=swap"
-          rel="stylesheet"
-        />
         <link rel="shortcut icon" href="assets/brain.png" type="image/png" />
-
         <link
           rel="stylesheet"
           href="https://cdn.jsdelivr.net/npm/katex/dist/katex.css"
@@ -56,7 +59,7 @@ export default function RootLayout({
           data-website-id={process.env.UMAMI_WEBSITE_ID}
         />
       </head>
-      <body className="scroll-smooth">
+      <body className={`scroll-smooth ${chivoMono.variable} ${inter.variable}`}>
         <Providers>{children}</Providers>
       </body>
     </html>

diff --git a/src/styles/base.css b/src/styles/base.css
@@ -7,7 +7,7 @@
 
   body {
     @apply bg-neutral-100 dark:bg-neutral-1000;
-    @apply font-['Inter'] text-neutral-900 dark:text-neutral-300;
+    @apply font-sans text-neutral-900 dark:text-neutral-300;
   }
 
   /* Syntax Highlighting */

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,7 +8,8 @@ module.exports = {
         20: '20deg'
       },
       fontFamily: {
-        'chivo-mono': ['"Chivo Mono"', 'cursive']
+        'chivo-mono': 'var(--font-chivo-mono)',
+        sans: 'var(--font-inter)'
       },
       colors: {
         neutral: {