From 7d765a474ec06e6fbcf6b5396c3d4bbbeed10f06 Mon Sep 17 00:00:00 2001 From: Alan Daniel Date: Mon, 16 Mar 2026 16:38:29 -0400 Subject: [PATCH] use font everywhere --- apps/www/app/layout.tsx | 38 +---------------------------- apps/www/lib/fonts.ts | 38 +++++++++++++++++++++++++++++ apps/www/pages/_app.tsx | 5 ++-- apps/www/styles/index.css | 26 ++------------------ apps/www/styles/realtime.module.css | 2 +- packages/config/tailwind.config.js | 4 +-- 6 files changed, 47 insertions(+), 66 deletions(-) create mode 100644 apps/www/lib/fonts.ts diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx index dc3baaf9b8f..bd90908ee0c 100644 --- a/apps/www/app/layout.tsx +++ b/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 = { diff --git a/apps/www/lib/fonts.ts b/apps/www/lib/fonts.ts new file mode 100644 index 00000000000..a2104e5292e --- /dev/null +++ b/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', +}) diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx index 3b043b098fd..30c4b7aa58b 100644 --- a/apps/www/pages/_app.tsx +++ b/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 ( - <> +
@@ -116,6 +117,6 @@ export default function App({ Component, pageProps }: AppProps) { - +
) } diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css index e19f450a152..c7a65d64565 100644 --- a/apps/www/styles/index.css +++ b/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); } diff --git a/apps/www/styles/realtime.module.css b/apps/www/styles/realtime.module.css index a58d8edb4ea..a9043028bbc 100644 --- a/apps/www/styles/realtime.module.css +++ b/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; } } diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js index 6839541eb33..c9469032a5f 100644 --- a/packages/config/tailwind.config.js +++ b/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