Next.js 13实验性App目录下字体名引用及字体设置问题

1. 在global.css中访问字体名 #

要在全局CSS里直接引用字体族，需要在初始化字体时配置variable选项，将字体封装为CSS变量注入页面：

1. 修改layout.js的字体初始化代码，添加自定义CSS变量：

import { Oswald, Comfortaa } from 'next/font/google';

const oswald = Oswald({
  subsets: ['latin'],
  display: "fallback",
  variable: '--font-oswald' // 定义字体变量名
})

const comfortaa = Comfortaa({
  subsets: ['latin'],
  display: "fallback",
  variable: '--font-comfortaa' // 定义字体变量名
})

2. 在html标签上挂载这两个变量类：

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${oswald.variable} ${comfortaa.variable}`}>
      <body className={comfortaa.className}> 
        <Navigation></Navigation>
        {children}
        <Footer></Footer>
      </body>
    </html>
  )
}

3. 此时就能在global.css中通过CSS变量调用字体：

/* 示例：给特定类使用Oswald字体 */
.title-section {
  font-family: var(--font-oswald);
}

2. 将另一款字体应用到H标签 #

当前你给body同时添加了两个字体类，导致样式冲突。只需保留一个基础字体，再通过CSS选择器单独给H标签设置另一款字体：

推荐方式：用CSS变量配置 #

基于上面的变量设置，在global.css中添加：

/* 所有H标签统一使用Oswald字体 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-oswald);
  /* 可按需添加font-weight、line-height等样式覆盖基础字体 */
}

替代方式：直接指定字体族 #

若不想用变量，也可直接在CSS中写字体名（注意和next/font加载的字体名一致）：

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
}

关键注意点：记得把body上的两个字体类去掉一个，只保留基础字体（比如Comfortaa），避免样式优先级冲突。

内容的提问来源于stack exchange，提问作者Fengler