如何在 Next JS 中导入自定义字体？

Question

我目前已经下载了这个存储库：

https://github.com/adrianhajdin/portfolio_website

来自本教程：

https://www.youtube.com/watch?v=OPaLnMw2i_0&list=LL&index=3&ab_channel=JavaScriptMastery

这是一个使用 React 的可自定义的 Next Js 项目，但是我在导入我自己的自定义字体时遇到问题，因为它似乎不支持常规 CSS。

我看到的更改字体的唯一选项是在这些设置中：

enter image description here

我似乎无法使用 CSS 在本地导入自定义字体系列。如果我尝试在同一个存储库中添加 style.css 并在模块导出中引用我的字体系列，则没有任何反应。

有谁知道如何解决这个问题？

Answer 1

您将哪个文件用作 global.css 或 index.css 首先像这样将其导入该文件

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

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

// rest of your css if have

然后转到 `tailwind.config.js 并像这样使用它：

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

如何在 Next JS 中导入自定义字体？

How to import custom fonts in Next JS?

javascript

css

reactjs

tailwind-css