如何在tailwindcss中从谷歌字体添加自定义字体？答案

【问题标题】：How to add custom fonts from google fonts in tailwindcss?如何在tailwindcss中从谷歌字体添加自定义字体？
【发布时间】：2021-09-08 10:56:23
【问题描述】：

我按照 YouTube 上的说明进行操作，但无法使用字体系列“nunito”。我将@import 放在“src”文件夹内的 CSS 文件中，然后在终端中运行“npm run (script name)”，但没有任何效果。

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        nunito: ["Nunito"], // ! find out why this fontFamily still not register to the styles.css inside the public -o output folder.
      },
      colors: {
        // THIS IS THE ADDITIONAL COLOR STYLES
        primary: "#FF6363",
        secondary: {
          100: "#E2E2D5",
          100: "#888883",
        },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

【问题讨论】：

您能在此处添加您的 CSS 文件吗？导入字体的位置。
我将编辑代码我将在我的文件中的代码先生。
添加了 src 文件的图片 Sir @Seno
谢谢，您在哪里声明字体系列？尝试将 font-family: 'Nunito', sans-serif; 添加到 CSS 中的 body 标记中。会是这样的：body { font-family: 'Nunito', sans-serif; }
其实就是顺风配置中的声明。我没有使用原生 css，这是顺风。

标签： css tailwind-css

【解决方案1】：

Based on their docs您可能已经声明密钥错误，您错过了 Nunito 密钥上的单引号。应该是：'nunito': ['Nunito']。

【讨论】：

是的，但是当我保存它时，“ ”会自动消失。
有意思，你有没有安装 eslint 或者其他 JS linting？
哦，我明白了。这只是我在VS代码插件中的代码格式化程序。谢谢！它现在正在工作。