diff --git a/app/globals.css b/app/globals.css index 003dd70..145efcc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,16 +1,7 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:wght@400&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; -:root { - --font-serif: "Instrument Serif", serif; -} - -body { - font-family: var(--font-sans), sans-serif; -} - .homeBtn { box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset, diff --git a/app/layout.tsx b/app/layout.tsx index f531a6e..919090a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,12 +1,12 @@ -import "./globals.css"; +import { Analytics } from "@vercel/analytics/react"; +import { GeistSans } from 'geist/font/sans'; import 'katex/dist/katex.min.css'; import 'mapbox-gl/dist/mapbox-gl.css'; import { Metadata, Viewport } from "next"; -import { Toaster } from "sonner"; import { Instrument_Serif } from 'next/font/google'; -import { Analytics } from "@vercel/analytics/react"; -import { Providers } from './providers' -import { GeistSans } from 'geist/font/sans'; +import { Toaster } from "sonner"; +import "./globals.css"; +import { Providers } from './providers'; export const metadata: Metadata = { metadataBase: new URL("https://mplx.run"), @@ -43,7 +43,11 @@ export const viewport: Viewport = { const instrumentSerif = Instrument_Serif({ weight: "400", subsets: ["latin"], - variable: "--font-serif" + style: ['normal', 'italic'], + variable: "--font-serif", + preload: true, + display: 'swap', + fallback: ['sans-serif'], }) export default function RootLayout({ @@ -53,7 +57,7 @@ export default function RootLayout({ }>) { return ( - + {children} diff --git a/tailwind.config.ts b/tailwind.config.ts index cf78bd6..a5590d6 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,4 +1,5 @@ import type { Config } from "tailwindcss"; +import { fontFamily } from 'tailwindcss/defaultTheme'; const config = { darkMode: ["class"], @@ -23,9 +24,9 @@ const config = { 'screen-small': '100svh', }, fontFamily: { - sans: ['var(--font-geist-sans)'], - serif: ['var(--font-serif)'], - mono: ['var(--font-geist-mono)'], + sans: ['var(--font-geist-sans)', ...fontFamily.sans], + serif: ['var(--font-serif)', ...fontFamily.serif], + mono: ['var(--font-geist-mono)', ...fontFamily.mono], }, colors: { border: "hsl(var(--border))", @@ -87,7 +88,11 @@ const config = { }, }, }, - plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography"),require("tailwind-scrollbar")], + plugins: [ + require("tailwindcss-animate"), + require("@tailwindcss/typography"), + require("tailwind-scrollbar") + ], } satisfies Config export default config \ No newline at end of file