chore: Fonts aliases set in tailwind config

kudos-ink · Dec 31, 2023 · 06b9fae · 06b9fae
1 parent 6b1d500
commit 06b9fae
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 24 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,12 +1,24 @@
 import "@/styles/globals.css";
 import { Metadata, Viewport } from "next";
-import { fontSans } from "@/config/fonts";
+import { Fira_Code, Inter } from "next/font/google";
 import { Providers } from "./providers";
 import { Navbar } from "@/components/navbar";
 import { Link } from "@nextui-org/link";
 import { SITE_CONFIG } from "@/data/config";
 import clsx from "clsx";
 
+export const fontSans = Inter({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-sans",
+});
+
+export const fontMono = Fira_Code({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-mono",
+});
+
 export const metadata: Metadata = {
   title: {
     default: SITE_CONFIG.name,
@@ -33,14 +45,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang="en"
+      className={clsx(fontMono.variable, fontSans.variable)}
+      suppressHydrationWarning
+    >
       <head />
-      <body
-        className={clsx(
-          "min-h-screen bg-background font-sans antialiased",
-          fontSans.variable,
-        )}
-      >
+      <body className="min-h-screen bg-background font-sans antialiased">
         <Providers themeProps={{ attribute: "class", defaultTheme: "kudos" }}>
           <div className="bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-default from-0% to-background to-80% relative flex flex-col h-screen">
             <Navbar />

diff --git a/config/fonts.ts b/config/fonts.ts
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,6 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,8 +11,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        "open-sans": ["Open Sans"],
-        "fira-code": ["Fira Code"],
+        sans: ["var(--font-sans)"],
+        mono: ["var(--font-mono)"],
         emoji: ["Noto Color Emoji"],
       },
     },