如何在 nextjs 项目里面使用 google font？

2023-10-11

我使用的 google font 是Press Start 2P。

import 字体

import { Press_Start_2P } from "next/font/google";

设定字体属性

const ps2 = Press_Start_2P({ subsets: ["latin"], weight:'400'});

subsets：只需要引进子集，减少空间浪费，比如只引进标准latin字母即可。

weight：字体粗细。

放入className

<h1 className={"text-3xl font-bold text-purple-400 " + ps2.className}>

完整代码如下：

import { Press_Start_2P } from "next/font/google";
const ps2 = Press_Start_2P({ subsets: ["latin"], weight:'400'});

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2 bg-gray-800">
      <h1 className={"text-3xl font-bold text-purple-400 " + ps2.className}>
        linxz:$ 
          <span className="text-gray-500"> type help to start</span>
      </h1>

      <div className="w-full max-w-2xl rounded-lg bg-gray-800 text-gray-100 p-4">
        {/* 终端内容 */}
      </div>
    </div>
  )
}

注意三个点：

  1. 原字体名字是Press Start 2P，带空格的，nextjs代码处理上，需要统一把空格变成下划线，即Press_Start_2P；

  2. 必须加上 weight 属性；

  3. 将className框起来时，注意后面要留空格，比如上面的text-purple-400后面带空格，这一块我可是debug了很久，不知道为啥字体不生效。

参考资料

nextjs 官网字体功能

google fonts