feat: custom Variant font

varianter · Sep 20, 2024 · 9b2828c · 9b2828c
1 parent afec9b1
commit 9b2828c
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 16 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,14 +1,15 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
-import { Darker_Grotesque, Figtree } from "next/font/google";
+import { Figtree } from "next/font/google";
 import "../src/styles/global.css";
+import localFont from "next/font/local";
 
-const darkerGrotesque = Darker_Grotesque({
-  subsets: ["latin"],
-  variable: "--font-darkerGrotesque",
+const fontRecoleta = localFont({
+  src: "../../public/recoleta.otf",
+  variable: "--font-recoleta",
 });
 
-const figtree = Figtree({
+const fontFigtree = Figtree({
   subsets: ["latin"],
   weight: "400",
   variable: "--font-figtree",
@@ -41,7 +42,7 @@ const preview: Preview = {
       }
 
       return (
-        <div className={`${figtree.variable} ${darkerGrotesque.variable}`}>
+        <div className={`${fontFigtree.variable} ${fontRecoleta.variable}`}>
           <Story />
         </div>
       );

diff --git a/public/recoleta.otf b/public/recoleta.otf
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from "next";
-import { Darker_Grotesque, Figtree } from "next/font/google";
+import { Figtree } from "next/font/google";
+import localFont from "next/font/local";
 import { draftMode } from "next/headers";
 
 import { generateMetadataFromSeo } from "src/utils/seo";
@@ -10,11 +11,12 @@ import { loadQuery } from "studio/lib/store";
 
 import "src/styles/global.css";
 
-const darkerGrotesque = Darker_Grotesque({
-  subsets: ["latin"],
-  variable: "--font-darkerGrotesque",
+const fontRecoleta = localFont({
+  src: "../../public/recoleta.otf",
+  variable: "--font-recoleta",
 });
-const figtree = Figtree({
+
+const fontFigtree = Figtree({
   subsets: ["latin"],
   weight: "400",
   variable: "--font-figtree",
@@ -44,7 +46,7 @@ export default async function RootLayout({
 
   return (
     <html lang={siteLang}>
-      <body className={`${figtree.variable} ${darkerGrotesque.variable}`}>
+      <body className={`${fontFigtree.variable} ${fontRecoleta.variable}`}>
         {children}
         {draftMode().isEnabled && <LiveVisualEditing />}
       </body>

diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
@@ -73,7 +73,7 @@
   color: var(--primary-white);
   cursor: pointer;
   text-decoration: none;
-  font-family: var(--font-darkerGrotesque);
+  font-family: var(--font-recoleta);
   font-size: 2rem;
   font-weight: 400;
 

diff --git a/src/components/navigation/footer/footer.module.css b/src/components/navigation/footer/footer.module.css
@@ -69,7 +69,7 @@
 
 .whiteColor {
   color: var(--primary-white) !important;
-  font-family: var(--font-darkerGrotesque) !important;
+  font-family: var(--font-recoleta) !important;
   font-size: 2rem !important;
   font-weight: 400 !important;
 }
diff --git a/src/components/sections/hero/hero.module.css b/src/components/sections/hero/hero.module.css
@@ -51,6 +51,7 @@
 }
 
 .title {
+  font-weight: 700;
   text-align: center;
 }
 

diff --git a/src/components/sections/testimonials/testimonials.module.css b/src/components/sections/testimonials/testimonials.module.css
@@ -83,7 +83,7 @@
   padding: 0.5rem;
   background-color: var(--primary-white);
   color: var(--primary-black);
-  font-family: var(--font-darkerGrotesque);
+  font-family: var(--font-recoleta);
   align-items: center;
   gap: 0.5rem;
   border-radius: 0.9375rem;

diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
@@ -4,7 +4,7 @@
 .h3,
 .bodySuperLarge {
   color: var(--primary-black);
-  font-family: var(--font-darkerGrotesque);
+  font-family: var(--font-recoleta);
 }
 
 .bodyLarge,
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,6 +51,7 @@ @@
     }
     .title {
+      font-weight: 700;
       text-align: center;
     }
@@ Expand Down @@