如何在 Next.js 项目的 tailwind css 中使用谷歌字体答案

【问题标题】：How to use google fonts in tailwind css in Next.js Project如何在 Next.js 项目的 tailwind css 中使用谷歌字体
【发布时间】：2022-08-12 15:50:03
【问题描述】：

我在 Next.js 中有一个项目，但不知道如何将 Google 字体与 Tailwind CSS 结合使用。

标签： next.js tailwind-css custom-font google-fonts

【解决方案1】：

首先你必须添加导入字体网址在全局的.css在里面风格文件夹和对于 React.js这将是索引.css在里面源代码文件夹。

例如

@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

然后扩展模块.exports在里面tailwind.config.js文件

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        play: ["Play", "sans-serif"],
      },
    },
  },
  plugins: [],
};

最后，你可以使用这个字体任何地方，例如

<h2 className="font-play text-5xl font-bold uppercase">
  Hello World!
</h2>

【讨论】：