feat: fixed font

hirosystems · Jan 16, 2025 · 6080314 · 6080314
1 parent 94cb3b5
commit 6080314
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 63 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';
 import { Metadata } from 'next';
+import { Instrument_Sans, Inter } from 'next/font/google';
+import localFont from 'next/font/local';
 import { cookies } from 'next/headers';
 import { ReactNode } from 'react';
 
@@ -10,6 +12,60 @@ import { getStatusBarContent } from './getStatusBarContent';
 import { getTokenPrice } from './getTokenPriceInfo';
 import './global.css';
 
+const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-inter',
+});
+
+const instrumentSans = Instrument_Sans({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-instrument-sans',
+});
+
+const openSauce = localFont({
+  src: [
+    {
+      path: '../ui/theme/fonts/opensaucesans-medium-webfont.woff2',
+      weight: '500',
+    },
+    {
+      path: '../ui/theme/fonts/opensaucesans-regular-webfont.woff2',
+      weight: '400',
+    },
+  ],
+  variable: '--font-open-sauce',
+});
+
+const matterRegular = localFont({
+  src: [
+    {
+      path: '../ui/theme/fonts/matter-regular.woff',
+      weight: '500',
+    },
+    {
+      path: '../ui/theme/fonts/matter-regular.woff2',
+      weight: '400',
+    },
+  ],
+  variable: '--font-matter',
+});
+
+const matterMonoRegular = localFont({
+  src: [
+    {
+      path: '../ui/theme/fonts/matter-mono-regular.woff',
+      weight: '500',
+    },
+    {
+      path: '../ui/theme/fonts/matter-mono-regular.woff2',
+      weight: '400',
+    },
+  ],
+  variable: '--font-matter-mono',
+});
+
 export async function generateMetadata(): Promise<Metadata> {
   return Promise.resolve(meta);
 }
@@ -22,7 +78,11 @@ export default async function RootLayout({ children }: { children: ReactNode })
   const tokenPrice = await getTokenPrice();
   const statusBarContent = await getStatusBarContent();
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${inter.variable} ${instrumentSans.variable} ${openSauce.variable} ${matterRegular.variable} ${matterMonoRegular.variable}`}
+    >
       <body>
         <Providers
           addedCustomNetworksCookie={addedCustomNetworksCookie}

diff --git a/src/ui/theme/fonts.ts b/src/ui/theme/fonts.ts
@@ -1,64 +1,7 @@
-// import { Instrument_Sans, Inter } from 'next/font/google';
-// import localFont from 'next/font/local';
-
-// export const inter = Inter({
-//   subsets: ['latin'],
-//   display: 'swap',
-// });
-
-// export const instrumentSans = Instrument_Sans({
-//   subsets: ['latin'],
-//   display: 'swap',
-// });
-
-// export const openSauce = localFont({
-//   src: [
-//     {
-//       path: './fonts/opensaucesans-medium-webfont.woff2',
-//       weight: '500',
-//     },
-//     {
-//       path: './fonts/opensaucesans-regular-webfont.woff2',
-//       weight: '400',
-//     },
-//   ],
-// });
-
-// export const matterRegular = localFont({
-//   src: [
-//     {
-//       path: './fonts/matter-regular.woff',
-//       weight: '500',
-//     },
-//     {
-//       path: './fonts/matter-regular.woff2',
-//       weight: '400',
-//     },
-//   ],
-// });
-
-// export const matterMonoRegular = localFont({
-//   src: [
-//     {
-//       path: './fonts/matter-mono-regular.woff',
-//       weight: '500',
-//     },
-//     {
-//       path: './fonts/matter-mono-regular.woff2',
-//       weight: '400',
-//     },
-//   ],
-// });
-
 export const FONTS = {
-  // body: inter.style.fontFamily,
-  // heading: openSauce.style.fontFamily,
-  // matter: matterRegular.style.fontFamily,
-  // matterMono: matterMonoRegular.style.fontFamily,
-  // instrument: instrumentSans.style.fontFamily,
-  body: { value: 'Inter, sans-serif' },
-  heading: { value: 'Open Sauce, sans-serif' },
-  matter: { value: 'Matter, sans-serif' },
-  matterMono: { value: 'Matter Mono, sans-serif' },
-  instrument: { value: 'Instrument Sans, sans-serif' },
+  heading: { value: 'var(--font-open-sauce)' },
+  matter: { value: 'var(--font-matter)' },
+  matterMono: { value: 'var(--font-matter-mono)' },
+  body: { value: 'var(--font-inter)' },
+  instrument: { value: 'var(--font-instrument-sans)' },
 };