javascript - 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: [],
};