chore: next/fonts

sushi-labs · Jun 22, 2023 · 0e479aa · 0e479aa · vercel · Jun 22, 2023
1 parent 7e0ca35
commit 0e479aa
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/apps/_root/app/layout.tsx b/apps/_root/app/layout.tsx
@@ -6,6 +6,20 @@ import React from 'react'
 import { Providers } from './providers'
 import { SanctionedAddressDialog } from '@sushiswap/wagmi/components/SanctionedAddressDialog'
 
+import { Inter, Roboto_Mono } from 'next/font/google'
+
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+const roboto_mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-roboto-mono',
+})
+
 export const metadata: Metadata = {
   title: {
     default: 'Sushi 🍣',
@@ -18,7 +32,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     // <html lang="en" className="[color-scheme:dark]">
-    <html lang="en" className="dark">
+    <html lang="en" className={`${inter.variable} ${roboto_mono.variable} dark`}>
       <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=1" />
       <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=1" />
       <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=1" />
@@ -27,9 +41,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <link rel="shortcut icon" href="/favicon.ico?v=1" />
       <body className="h-screen">
         <Providers>
-          <SanctionedAddressDialog/>
-            {children}
-          </Providers>
+          <SanctionedAddressDialog />
+          {children}
+        </Providers>
       </body>
     </html>
   )

diff --git a/config/tailwindcss/src/index.ts b/config/tailwindcss/src/index.ts
@@ -27,7 +27,8 @@ const config = {
     },
     extend: {
       fontFamily: {
-        sans: ['Inter Variable', ...defaultTheme.fontFamily.sans],
+        sans: ['var(--font-inter)'],
+        mono: ['var(--font-roboto-mono)'],
       },
       backgroundImage: () => ({
         'gradient-radial': 'radial-gradient(#13213E, #111829)',