Next.js + Tamagui 单仓项目中如何正确加载字体？

以下是针对性的步骤，帮你让Next.js端正确匹配Tamagui的字体配置：

一、优先使用Next.js官方next/font方案（推荐） #

这个方案能避免字体名称冲突，且支持自动优化加载：

1. 在Next.js入口文件中配置字体
   如果是Pages Router，修改pages/_app.tsx；如果是App Router，修改app/layout.tsx：

   import type { AppProps } from 'next/app'
   import { Open_Sans, Glegoo, Nunito } from 'next/font/google'
   
   // 按需指定你用到的字重、样式，和Tamagui配置保持一致
   const openSans = Open_Sans({
     subsets: ['latin'],
     weight: ['400', '500', '700'],
     style: ['normal', 'italic'],
     variable: '--font-open-sans', // 定义CSS变量，用于Tamagui引用
   })
   
   const glegoo = Glegoo({
     subsets: ['latin'],
     weight: ['400', '700'],
     variable: '--font-glegoo',
   })
   
   const nunito = Nunito({
     subsets: ['latin'],
     weight: ['400', '600', '700'],
     variable: '--font-nunito',
   })
   
   function MyApp({ Component, pageProps }: AppProps) {
     return (
       // 将字体变量挂载到根元素
       <main className={`${openSans.variable} ${glegoo.variable} ${nunito.variable}`}>
         <Component {...pageProps} />
       </main>
     )
   }
   
   export default MyApp
   

2. 修改Tamagui配置引用CSS变量
   在packages/config/src/tamagui.config.ts中，把字体家族替换为对应的CSS变量：

   import { createTamagui } from 'tamagui'
   
   const config = createTamagui({
     fonts: {
       body: {
         family: 'var(--font-open-sans)', // 和上面定义的变量名一致
         size: { /* 你的原有配置 */ },
         lineHeight: { /* 你的原有配置 */ },
       },
       heading: {
         family: 'var(--font-glegoo)',
         /* 你的原有配置 */
       },
       nunito: {
         family: 'var(--font-nunito)',
         /* 你的原有配置 */
       },
     },
     // 其他Tamagui配置...
   })
   
   export default config
   

二、如果用Google Fonts CDN方案，需注意这几点 #

1. 正确引入CDN链接
   在Next.js的Head组件中添加预连接和字体样式链接（确保字重、样式和Tamagui用到的一致）：

   import Head from 'next/head'
   
   function MyApp({ Component, pageProps }) {
     return (
       <>
         <Head>
           <link rel="preconnect" href="https://fonts.googleapis.com" />
           <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
           <link 
             href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&family=Glegoo:wght@400;700&family=Nunito:wght@400;600;700&display=swap" 
             rel="stylesheet" 
           />
         </Head>
         <Component {...pageProps} />
       </>
     )
   }
   

2. Tamagui配置中使用准确的字体名称
   Google Fonts的字体名称是带空格的（比如Open Sans），需要用引号包裹避免解析错误：

   fonts: {
     body: {
       family: '"Open Sans", sans-serif', // 注意引号和空格
       /* 你的原有配置 */
     },
   }
   

三、额外排查步骤 #

• 检查全局CSS是否覆盖了Tamagui的字体设置，比如body标签的font-family样式
• 清除Next.js缓存：删除.next文件夹，重启开发服务
• 确保Tamagui和Next.js集成正确：在next.config.js中配置transpilePackages包含Tamagui相关包，或者使用@tamagui/next-plugin

内容的提问来源于stack exchange，提问作者ColstonBod-oy