Hanah tomas/fontstyle (#48)

* attempted to change fonts * small fix * small changes * smaller change --------- Co-authored-by: wkim10 <[email protected]>
JumboCode · Dec 11, 2024 · be0a093 · be0a093
1 parent 43e3c9c
commit be0a093
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/fonts/sofia-pro.woff2 b/src/app/fonts/sofia-pro.woff2
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -5,16 +5,20 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --font-sofia-pro: "Sofia Pro", sans-serif;
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-sofia-pro);
 }
 
 @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
+  .font-primary {
+    font-family: var(--font-sofia-pro);
+  }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,15 +3,10 @@ import localFont from "next/font/local";
 import "./globals.css";
 import AuthProvider from "./context/AuthProvider";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+const sofiaPro = localFont({
+  src: "./fonts/sofia-pro.woff2",
+  variable: "--font-sofia-pro",
+  weight: "400",
 });
 
 export const metadata: Metadata = {
@@ -26,9 +21,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`${sofiaPro.variable} antialiased`}>
         <AuthProvider>{children}</AuthProvider>
       </body>
     </html>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -11,12 +11,15 @@ const config: Config = {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
-        'darkrose': "#9A0F28",
-        'rose': "#FFF0F1",
-        'gray/500': '#667085',
-        'icon-color': "#667085",
+        darkrose: "#9A0F28",
+        rose: "#FFF0F1",
+        "gray/500": "#667085",
+        "icon-color": "#667085",
       },
     },
+    fontFamily: {
+      sofiaPro: ["var(--Sofia Pro)", "sans-serif"],
+    },
   },
   plugins: [],
 };