Merge pull request #22 from aragon/f/ui-look-and-feel

Adding custom fonts
aragon · Jul 30, 2024 · 7ac9fe8 · 7ac9fe8
2 parents e349f12 + 4d70398
commit 7ac9fe8
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 8 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,21 +1,16 @@
 import { RootContextProvider } from "@/context";
 import { Layout } from "@/components/layout";
 import AlertContainer from "@/components/alert/alert-container";
-import { Manrope } from "next/font/google";
 import "@aragon/ods/index.css";
 import "@/pages/globals.css";
 import { PUB_APP_NAME } from "@/constants";
 import Head from "next/head";
 
-const manrope = Manrope({
-  subsets: ["latin"],
-});
-
 export default function AragonetteApp({ Component, pageProps }: any) {
   // const initialState = cookieToInitialState(config, headers().get('cookie'))
 
   return (
-    <div className={manrope.className}>
+    <div>
       <Head>
         <title>{PUB_APP_NAME}</title>
       </Head>

diff --git a/pages/globals.css b/pages/globals.css
@@ -5,7 +5,7 @@
 @layer base {
   :root {
     --tw-text-opacity: 1;
-    
+
     /* Primary */
     --ods-color-primary-50: 254 241 249;
     --ods-color-primary-100: 252 222 241;
@@ -79,11 +79,44 @@
   }
 }
 
+/* Main font */
+@font-face {
+  font-family: "Public Sans";
+  src:
+    url(/fonts/PublicSans/PublicSans-SemiBold.woff2) format("woff2"),
+    url(/fonts/PublicSans/PublicSans-SemiBold.woff) format("woff"),
+    url(/fonts/PublicSans/PublicSans-SemiBold.ttf) format("truetype");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Public Sans";
+  src:
+    url(/fonts/PublicSans/PublicSans-Regular.woff2) format("woff2"),
+    url(/fonts/PublicSans/PublicSans-Regular.woff) format("woff"),
+    url(/fonts/PublicSans/PublicSans-Regular.ttf) format("truetype");
+  font-weight: 400;
+}
+
+/* Titles font */
+
+@font-face {
+  font-family: "Clash Grotesk";
+  src:
+    url(/fonts/ClashGrotesk/ClashDisplay-Semibold.woff2) format("woff2"),
+    url(/fonts/ClashGrotesk/ClashDisplay-Semibold.woff) format("woff"),
+    url(/fonts/ClashGrotesk/ClashDisplay-Semibold.ttf) format("truetype");
+  font-weight: 600;
+}
+
 body {
   /* Variables imported from layout.tsx > @aragon/ods */
   color: var(--ods-color-neutral-800);
   background-color: var(--ods-color-neutral-50);
-  font-family: var(--ods-font-family);
+
+  /* font-family: var(--ods-font-family); */
+  /* Custom */
+  font-family: "Public Sans";
 }
 
 h1,
@@ -94,6 +127,10 @@ h5,
 h6 {
   /* Variables imported from layout.tsx > @aragon/ods */
   color: var(--ods-color-neutral-800);
+
+  /* Custom */
+  font-family: "Clash Grotesk";
+  font-weight: 600;
 }
 
 p,

diff --git a/public/fonts/ClashGrotesk/ClashDisplay-Semibold.eot b/public/fonts/ClashGrotesk/ClashDisplay-Semibold.eot
diff --git a/public/fonts/ClashGrotesk/ClashDisplay-Semibold.ttf b/public/fonts/ClashGrotesk/ClashDisplay-Semibold.ttf
diff --git a/public/fonts/ClashGrotesk/ClashDisplay-Semibold.woff b/public/fonts/ClashGrotesk/ClashDisplay-Semibold.woff
diff --git a/public/fonts/ClashGrotesk/ClashDisplay-Semibold.woff2 b/public/fonts/ClashGrotesk/ClashDisplay-Semibold.woff2
diff --git a/public/fonts/PublicSans/PublicSans-Regular.eot b/public/fonts/PublicSans/PublicSans-Regular.eot
diff --git a/public/fonts/PublicSans/PublicSans-Regular.ttf b/public/fonts/PublicSans/PublicSans-Regular.ttf
diff --git a/public/fonts/PublicSans/PublicSans-Regular.woff b/public/fonts/PublicSans/PublicSans-Regular.woff
diff --git a/public/fonts/PublicSans/PublicSans-Regular.woff2 b/public/fonts/PublicSans/PublicSans-Regular.woff2
diff --git a/public/fonts/PublicSans/PublicSans-SemiBold.eot b/public/fonts/PublicSans/PublicSans-SemiBold.eot
diff --git a/public/fonts/PublicSans/PublicSans-SemiBold.ttf b/public/fonts/PublicSans/PublicSans-SemiBold.ttf
diff --git a/public/fonts/PublicSans/PublicSans-SemiBold.woff b/public/fonts/PublicSans/PublicSans-SemiBold.woff
diff --git a/public/fonts/PublicSans/PublicSans-SemiBold.woff2 b/public/fonts/PublicSans/PublicSans-SemiBold.woff2