feat: new fonts

Myoschen · Dec 13, 2023 · d55dd1e · d55dd1e
1 parent 3c000cc
commit d55dd1e
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
     "framer-motion": "^10.16.16",
+    "geist": "^1.2.0",
     "lodash": "^4.17.21",
     "next": "14.0.4",
     "next-intl": "3.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/fonts/SarasaGothic/sarasa-gothic-tc-bold.ttf b/public/fonts/SarasaGothic/sarasa-gothic-tc-bold.ttf
diff --git a/public/fonts/SarasaGothic/sarasa-gothic-tc-light.ttf b/public/fonts/SarasaGothic/sarasa-gothic-tc-light.ttf
diff --git a/public/fonts/SarasaGothic/sarasa-gothic-tc-regular.ttf b/public/fonts/SarasaGothic/sarasa-gothic-tc-regular.ttf
diff --git a/public/fonts/SarasaGothic/sarasa-gothic-tc-semibold.ttf b/public/fonts/SarasaGothic/sarasa-gothic-tc-semibold.ttf
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -1,16 +1,19 @@
 import '@/constants/globals.css'
 
 import type { Metadata } from 'next'
+import { Noto_Sans_TC } from 'next/font/google'
 import { notFound } from 'next/navigation'
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server'
+import { GeistSans } from 'geist/font/sans'
 
 import Providers from '@/components/providers'
 import Sidebar from '@/components/sidebar'
-import { sarasa_gothic, work_sans } from '@/constants/fonts'
 import { locales } from '@/lib/i18n'
 import type { Locale } from '@/lib/types'
 import { cn } from '@/lib/utils'
 
+const NotoSansTC = Noto_Sans_TC({ variable: '--font-noto-sans-tc', subsets: ['latin'] })
+
 interface RootLayoutProps {
   children: React.ReactNode
   params: { locale: Locale }
@@ -42,9 +45,8 @@ export default function RootLayout({ children, params: { locale } }: RootLayoutP
   unstable_setRequestLocale(locale)
 
   return (
-    <html lang={locale} className={cn(work_sans.variable, sarasa_gothic.variable)} suppressHydrationWarning={true}>
-
-      <body className={'min-h-screen bg-mauve-1 font-main text-mauve-12 dark:bg-mauve-dark-1 dark:text-mauve-dark-12'}>
+    <html lang={locale} className={cn(NotoSansTC.variable, GeistSans.variable)} suppressHydrationWarning={true}>
+      <body className={'min-h-screen bg-mauve-1 text-mauve-12 dark:bg-mauve-dark-1 dark:text-mauve-dark-12'}>
         <div className={'flex max-w-4xl flex-col pb-20 pt-8 antialiased transition-colors md:mx-auto md:flex-row md:pt-20 lg:pt-32'}>
           <Providers>
             <Sidebar />

diff --git a/src/constants/fonts.ts b/src/constants/fonts.ts
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,14 +1,16 @@
+const { fontFamily } = require('tailwindcss/defaultTheme')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{ts,tsx}'],
   darkMode: ['class'],
   theme: {
     extend: {
       fontFamily: {
-        main: [
-          'var(--ff-work-sans)',
-          'var(--ff-sarasa-gothic-tc)',
-          'sans-serif',
+        sans: [
+          'var(--font-geist-sans)',
+          'var(--font-noto-sans-tc)',
+          ...fontFamily.sans,
         ],
       },
     },