fix: add font vars

zuplo · Jan 9, 2024 · 38e2c14 · 38e2c14
1 parent 7390f51
commit 38e2c14
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,7 +6,7 @@ import { Layout } from "@/components/Layout";
 
 import "@/styles/tailwind.css";
 import "@/styles/styles.css";
-import { beVietnamProFont } from "../lib/fonts";
+import { inter, firaSans } from "../lib/fonts";
 
 export const metadata: Metadata = {
   title: {
@@ -23,7 +23,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={clsx("h-full antialiased", beVietnamProFont.variable)}
+      className={clsx("h-full antialiased", inter.variable, firaSans.variable)}
       suppressHydrationWarning
     >
       <head>

diff --git a/src/lib/fonts.ts b/src/lib/fonts.ts
@@ -1,7 +1,15 @@
-import { Be_Vietnam_Pro } from "next/font/google";
+import { Fira_Sans, Inter } from "next/font/google";
 
-export const beVietnamProFont = Be_Vietnam_Pro({
+export const inter = Inter({
+  weight: ["400", "500", "600", "700"],
   subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-  variable: "--font-be-vietnam-pro",
+  display: "swap",
+  variable: "--font-inter",
+});
+
+export const firaSans = Fira_Sans({
+  weight: ["400", "500", "600", "700"],
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-fira-sans",
 });
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -4,7 +4,7 @@ import { Config } from "tailwindcss";
 const plugin = require("tailwindcss/plugin");
 
 const typographyHeading = () => ({
-  fontFamily: ["Fira Sans", "sans-serif"],
+  fontFamily: ["var(--font-fira-sans)", "sans-serif"],
   fontStyle: "normal",
   fontWeight: "bold",
   lineHeight: "120%",
@@ -156,12 +156,12 @@ export default {
       }),
     },
     fontFamily: {
-      sans: ["Inter", "sans-serif"],
-      display: ["Inter", "sans-serif"],
+      sans: ["var(--font-inter)", "sans-serif"],
+      display: ["var(--font-inter)", "sans-serif"],
 
       // Zuplo Fonts
-      base: ["Inter", "sans-serif"],
-      fancy: ["Fira Sans", "sans-serif"],
+      base: ["var(--font-inter)", "sans-serif"],
+      fancy: ["var(--font-fira-sans)", "sans-serif"],
       mono: ["Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace"],
     },
     letterSpacing: {