Change serif font to GT Alpina

celo-org · Mar 16, 2024 · 795b470 · 795b470
1 parent 64dd373
commit 795b470
Show file tree

Hide file tree

Showing 16 changed files with 29 additions and 9 deletions.
diff --git a/src/app/governance/[id]/styles.module.css b/src/app/governance/[id]/styles.module.css
@@ -17,7 +17,7 @@
 .proposal h2,
 .proposal h3,
 .proposal h4 {
-  font-family: 'Garamond', serif;
+  font-family: var(--font-alpina), serif;
 }
 
 .proposal h1,

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,10 @@
 import { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 import { PropsWithChildren } from 'react';
 import { links } from 'src/config/links';
+import { alpinaFont, interFont } from 'src/styles/fonts';
 import 'src/styles/globals.css';
 import { App } from './app';
 
-const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
-
 export const metadata: Metadata = {
   applicationName: 'Celo Station',
   metadataBase: new URL(links.home),
@@ -34,7 +32,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: PropsWithChildren<any>) {
   return (
     <html lang="en" data-theme="light">
-      <body className={`${inter.variable} font-sans text-base`}>
+      <body className={`${interFont.variable} ${alpinaFont.variable} font-sans text-base`}>
         <App>{children}</App>
       </body>
     </html>

diff --git a/src/app/staking/[address]/page.tsx b/src/app/staking/[address]/page.tsx
@@ -339,7 +339,7 @@ function Stakers({ group }: { group?: ValidatorGroup }) {
           label={() => formatNumberString(fromWei(group?.votes))}
           labelStyle={{
             fontSize: '10px',
-            fontFamily: "'Garamond', 'serif'",
+            fontFamily: 'var(--font-alpina), serif',
           }}
           labelPosition={0}
         />

diff --git a/src/config/config.ts b/src/config/config.ts
@@ -24,5 +24,5 @@ export const config: Config = Object.freeze({
   fornoApiKey,
   celoscanApiKey,
   infuraApiKey,
-  watchBlockNumber: !isDevMode,
+  watchBlockNumber: false,
 });
diff --git a/src/styles/alpina/GT-Alpina-Standard-Bold-Italic.woff2 b/src/styles/alpina/GT-Alpina-Standard-Bold-Italic.woff2
diff --git a/src/styles/alpina/GT-Alpina-Standard-Bold.woff2 b/src/styles/alpina/GT-Alpina-Standard-Bold.woff2
diff --git a/src/styles/alpina/GT-Alpina-Standard-Light-Italic.woff2 b/src/styles/alpina/GT-Alpina-Standard-Light-Italic.woff2
diff --git a/src/styles/alpina/GT-Alpina-Standard-Light.woff2 b/src/styles/alpina/GT-Alpina-Standard-Light.woff2
diff --git a/src/styles/alpina/GT-Alpina-Standard-Medium-Italic.woff2 b/src/styles/alpina/GT-Alpina-Standard-Medium-Italic.woff2
diff --git a/src/styles/alpina/GT-Alpina-Standard-Medium.woff2 b/src/styles/alpina/GT-Alpina-Standard-Medium.woff2
diff --git a/src/styles/alpina/GT-Alpina-Standard-Regular-Italic.woff2 b/src/styles/alpina/GT-Alpina-Standard-Regular-Italic.woff2
diff --git a/src/styles/alpina/GT-Alpina-Standard-Regular.woff2 b/src/styles/alpina/GT-Alpina-Standard-Regular.woff2
diff --git a/src/styles/alpina/GT-Alpina-Standard-Thin-Italic.woff2 b/src/styles/alpina/GT-Alpina-Standard-Thin-Italic.woff2
diff --git a/src/styles/alpina/GT-Alpina-Standard-Thin.woff2 b/src/styles/alpina/GT-Alpina-Standard-Thin.woff2
diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
@@ -0,0 +1,22 @@
+import { Inter } from 'next/font/google';
+import localFont from 'next/font/local';
+
+export const interFont = Inter({ subsets: ['latin'], variable: '--font-inter' });
+
+export const alpinaFont = localFont({
+  src: [
+    {
+      path: './alpina/GT-Alpina-Standard-Thin.woff2',
+      weight: '300',
+    },
+    {
+      path: './alpina/GT-Alpina-Standard-Light.woff2',
+      weight: '400',
+    },
+    {
+      path: './alpina/GT-Alpina-Standard-Regular.woff2',
+      weight: '500',
+    },
+  ],
+  variable: '--font-alpina',
+});
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -38,7 +38,7 @@ module.exports = {
     },
     fontFamily: {
       sans: ['var(--font-inter)', 'sans-serif'],
-      serif: ['Garamond', 'serif'],
+      serif: ['var(--font-alpina)', 'serif'],
       mono: ['Courier New', 'monospace'],
     },
     fontSize: {
@@ -70,7 +70,7 @@ module.exports = {
       },
       backgroundImage: {
         'diamond-texture': "url('/backgrounds/diamond-texture.png')",
-      }
+      },
     },
   },