use font everywhere

apps/www/app/layout.tsx

@@ -3,49 +3,13 @@ import 'config/code-hike.scss'
 import '../styles/index.css'
 
 import { APP_NAME, DEFAULT_META_DESCRIPTION } from '~/lib/constants'
+import { ktfPrima } from '~/lib/fonts'
 import { Agentation } from 'agentation'
 import { Metadata } from 'next'
 import type { Viewport } from 'next'
-import localFont from 'next/font/local'
 
 import Providers from './providers'
 
-const ktfPrima = localFont({
-  src: [
-    {
-      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Thin.woff2',
-      weight: '100',
-      style: 'normal',
-    },
-    {
-      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Light.woff2',
-      weight: '300',
-      style: 'normal',
-    },
-    {
-      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Regular.woff2',
-      weight: '400',
-      style: 'normal',
-    },
-    {
-      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Medium.woff2',
-      weight: '500',
-      style: 'normal',
-    },
-    {
-      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Bold.woff2',
-      weight: '700',
-      style: 'normal',
-    },
-    {
-      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Black.woff2',
-      weight: '900',
-      style: 'normal',
-    },
-  ],
-  variable: '--font-ktf-prima',
-})
-
 const site_title = `${APP_NAME} | The Open Source Firebase Alternative`
 
 export const metadata: Metadata = {

apps/www/lib/fonts.ts

@@ -0,0 +1,38 @@
+import localFont from 'next/font/local'
+
+export const ktfPrima = localFont({
+  src: [
+    {
+      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Thin.woff2',
+      weight: '100',
+      style: 'normal',
+    },
+    {
+      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Light.woff2',
+      weight: '300',
+      style: 'normal',
+    },
+    {
+      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: '../public/fonts/ktf-prima/KTFPrimaTrial-Black.woff2',
+      weight: '900',
+      style: 'normal',
+    },
+  ],
+  variable: '--font-ktf-prima',
+  display: 'swap',
+})

apps/www/pages/_app.tsx

@@ -15,6 +15,7 @@ import { DevToolbar, DevToolbarProvider } from 'dev-tools'
 import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
+import { ktfPrima } from '~/lib/fonts'
 import { useRouter } from 'next/router'
 import { SonnerToaster, themes, TooltipProvider } from 'ui'
 import { CommandProvider } from 'ui-patterns/CommandMenu'
@@ -53,7 +54,7 @@ export default function App({ Component, pageProps }: AppProps) {
   }
 
   return (
-    <>
+    <main className={`${ktfPrima.variable} ${ktfPrima.className}`}>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Head>
@@ -116,6 +117,6 @@ export default function App({ Component, pageProps }: AppProps) {
         </FeatureFlagProvider>
       </AuthProvider>
       <TelemetryTagManager />
-    </>
+    </main>
   )
 }

apps/www/styles/index.css

@@ -23,29 +23,7 @@
   }
 }
 
-@font-face {
-  font-family: 'custom-font';
-  src:
-    url(../../../packages/common/assets/fonts/CustomFont-Book.woff2) format('woff2'),
-    url(../../../packages/common/assets/fonts/CustomFont-Book.woff) format('woff');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'custom-font';
-  src:
-    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff2) format('woff2'),
-    url(../../../packages/common/assets/fonts/CustomFont-Medium.woff) format('woff');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-}
-
 :root {
-  --heading-font: var(--font-ktf-prima);
-  --body-font: var(--font-ktf-prima);
   --heading-tracking: -0.02em;
   --body-tracking: -0.01em;
   --heading-leading: 1.1;
@@ -58,7 +36,7 @@ html {
 
 body {
   @apply bg text-foreground;
-  font-family: var(--body-font), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-ktf-prima), ui-sans-serif, system-ui, sans-serif;
   letter-spacing: var(--body-tracking);
   line-height: var(--body-leading);
   -webkit-font-smoothing: antialiased;
@@ -66,7 +44,7 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-family: var(--heading-font), ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--font-ktf-prima), ui-sans-serif, system-ui, sans-serif;
   letter-spacing: var(--heading-tracking);
   line-height: var(--heading-leading);
 }

apps/www/styles/realtime.module.css

@@ -104,7 +104,7 @@
   88.1%,
   100% {
     opacity: 1;
-    font-family: 'custom-font';
+    font-family: var(--font-ktf-prima), ui-sans-serif, system-ui, sans-serif;
     background-color: transparent;
   }
 }

packages/config/tailwind.config.js

@@ -374,8 +374,8 @@ const uiConfig = ui({
         xs: '480px',
       },
       fontFamily: {
-        sans: 'var(--font-custom, Circular, custom-font, Helvetica Neue, Helvetica, Arial, sans-serif)',
-        mono: 'var(--font-source-code-pro, Source Code Pro, Office Code Pro, Menlo, monospace)',
+        sans: 'var(--font-ktf-prima), ui-sans-serif, system-ui, sans-serif',
+        mono: 'var(--font-source-code-pro), Source Code Pro, Office Code Pro, Menlo, monospace',
       },
 
       // shadcn defaults START