如何在使用顺风css时在本地向Next.Js项目添加google字体

在使用顺风CSS时，在本地向Next.js项目添加Google字体，可以按照以下步骤进行操作：

首先，确保你已经在本地安装了Next.js项目，并且已经使用顺风CSS作为项目的样式库。
打开Google Fonts网站（https://fonts.google.com/），浏览并选择你想要使用的字体。你可以使用搜索框来查找特定的字体，也可以浏览不同的字体类别。
选择一个字体后，点击右上角的"+"按钮，将该字体添加到你的收藏夹。
在收藏夹中，你可以调整字体的样式和权重，以满足你的需求。完成后，点击底部的"Embed"按钮。
在弹出的对话框中，你可以看到嵌入字体的代码。选择"Standard"选项卡，并复制提供的代码。
回到你的Next.js项目中，在你的项目文件夹中找到顶层的"_app.js"文件（如果没有，请创建一个）。这是Next.js中用于自定义应用程序的文件。
在"_app.js"文件中，导入"Head"组件和"link"标签：

import Head from 'next/head';

在"_app.js"文件的返回部分，使用"Head"组件添加一个"link"标签，将Google字体的嵌入代码粘贴到其中。确保将代码包裹在"<> </>"标签中。

return (
  <>
    <Head>
      <link
        href="https://fonts.googleapis.com/css2?family=YOUR_FONT_FAMILY&display=swap"
        rel="stylesheet"
      />
    </Head>
    <Component {...pageProps} />
  </>
);

将上述代码中的"YOUR_FONT_FAMILY"替换为你选择的字体的名称。例如，如果你选择了"Roboto"字体，代码应如下所示：

return (
  <>
    <Head>
      <link
        href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
        rel="stylesheet"
      />
    </Head>
    <Component {...pageProps} />
  </>
);