v3 - replace current fonts with Britti sans (#722)

* replace figtree and recoleta with britti-sans * Update .storybook/preview.tsx Co-authored-by: christinaroise <[email protected]> * Update src/app/layout.tsx Co-authored-by: Mathias Oterhals Myklebust <[email protected]> * resolve conflict * fix up font path --------- Co-authored-by: christinaroise <[email protected]> Co-authored-by: Mathias Oterhals Myklebust <[email protected]>
varianter · Sep 27, 2024 · 98faa95 · 98faa95
1 parent 6fe6675
commit 98faa95
Show file tree

Hide file tree

Showing 13 changed files with 21 additions and 35 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,18 +1,11 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
-import { Figtree } from "next/font/google";
 import "../src/styles/global.css";
 import localFont from "next/font/local";
 
-const fontRecoleta = localFont({
-  src: "../../public/_assets/recoleta.otf",
-  variable: "--font-recoleta",
-});
-
-const fontFigtree = Figtree({
-  subsets: ["latin"],
-  weight: "400",
-  variable: "--font-figtree",
+const fontBrittiSans = localFont({
+  src: "../../public/_assets/britti-sans-variable.woff2",
+  variable: "--font-britti-sans",
 });
 
 const preview: Preview = {
@@ -42,7 +35,7 @@ const preview: Preview = {
       }
 
       return (
-        <div className={`${fontFigtree.variable} ${fontRecoleta.variable}`}>
+        <div className={fontBrittiSans.variable}>
           <Story />
         </div>
       );

diff --git a/public/_assets/britti-sans-variable.woff2 b/public/_assets/britti-sans-variable.woff2
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import { Metadata } from "next";
-import { Figtree } from "next/font/google";
 import localFont from "next/font/local";
 import { draftMode } from "next/headers";
 
@@ -11,15 +10,9 @@ import { loadStudioQuery } from "studio/lib/store";
 
 import "src/styles/global.css";
 
-const fontRecoleta = localFont({
-  src: "../../public/_assets/recoleta.otf",
-  variable: "--font-recoleta",
-});
-
-const fontFigtree = Figtree({
-  subsets: ["latin"],
-  weight: "400",
-  variable: "--font-figtree",
+const fontBrittiSans = localFont({
+  src: "../../public/_assets/britti-sans-variable.woff2",
+  variable: "--font-britti-sans",
 });
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -45,7 +38,7 @@ export default async function RootLayout({
   }
   return (
     <html lang={siteLang}>
-      <body className={`${fontFigtree.variable} ${fontRecoleta.variable}`}>
+      <body className={fontBrittiSans.variable}>
         {children}
         {draftMode().isEnabled && <LiveVisualEditing />}
       </body>

diff --git a/src/blog/components/hero/blogHero.module.css b/src/blog/components/hero/blogHero.module.css
@@ -54,7 +54,7 @@
   border-radius: 1.5rem;
   background-color: var(--primary-white);
   color: var(--primary-black);
-  font-family: var(--font-figtree);
+  font-family: var(--font-britti-sans);
   font-size: 1rem;
   font-weight: 400;
   white-space: nowrap;

diff --git a/src/blog/components/legal/legal.module.css b/src/blog/components/legal/legal.module.css
@@ -76,7 +76,7 @@
 
 .linkTitle {
   color: var(--primary-black, #1f1f1f);
-  font-family: var(--font-figtree);
+  font-family: var(--font-britti-sans);
   font-size: 1.5rem;
   font-style: normal;
   font-weight: 700;

diff --git a/src/blog/components/postCard/postCard.module.css b/src/blog/components/postCard/postCard.module.css
@@ -16,7 +16,7 @@
   text-decoration: none;
   text-wrap: wrap;
   color: var(--primary-black);
-  font-family: var(--font-figtree);
+  font-family: var(--font-britti-sans);
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 140%;

diff --git a/src/components/buttons/button.module.css b/src/components/buttons/button.module.css
@@ -9,7 +9,7 @@
   border-radius: 1.5625rem;
   border: none;
   background: var(--primary-white);
-  font-family: var(--font-figtree);
+  font-family: var(--font-britti-sans);
   text-wrap: nowrap;
 }
 

diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
@@ -22,7 +22,7 @@
   align-items: center;
   text-decoration: none;
   gap: 0.5rem;
-  font-family: var(--font-figtree);
+  font-family: var(--font-britti-sans);
   font-size: 1.125rem;
   font-weight: 500;
 
@@ -56,7 +56,7 @@
   color: var(--primary-black);
   cursor: pointer;
   text-decoration: none;
-  font-family: var(--font-figtree);
+  font-family: var(--font-britti-sans);
   font-size: 1.25rem;
   font-weight: 500;
 
@@ -73,7 +73,7 @@
   color: var(--primary-white);
   cursor: pointer;
   text-decoration: none;
-  font-family: var(--font-recoleta);
+  font-family: var(--font-britti-sans);
   font-size: 2rem;
   font-weight: 400;
 

diff --git a/src/components/linkButton/linkButton.module.css b/src/components/linkButton/linkButton.module.css
@@ -12,7 +12,7 @@
   gap: 0.6rem;
   border-radius: 1.5625rem;
   border: none;
-  font-family: var(--font-figtree);
+  font-family: var(--font-britti-sans);
   text-decoration: none;
 
   padding: 0.5rem 1.25rem;

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-recoleta) !important;
+  font-family: var(--font-britti-sans) !important;
   font-size: 2rem !important;
   font-weight: 400 !important;
 }
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-recoleta);
+  font-family: var(--font-britti-sans);
   align-items: center;
   gap: 0.5rem;
   border-radius: 0.9375rem;

diff --git a/src/components/skipToMain/skipToMain.module.css b/src/components/skipToMain/skipToMain.module.css
@@ -14,7 +14,7 @@
 
   text-decoration: none;
   color: var(--primary-white, #faf8f5);
-  font-family: var(--font-figtree);
+  font-family: var(--font-britti-sans);
   font-size: 1.25rem;
   font-style: normal;
   font-weight: 400;

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-recoleta);
+  font-family: var(--font-britti-sans);
 }
 
 .bodyLarge,
@@ -13,7 +13,7 @@
 .caption,
 .list {
   color: var(--primary-black);
-  font-family: var(--font-figtree);
+  font-family: var(--font-britti-sans);
   line-height: 140%;
 }