Import 如何在Tailwind CSS中使用google字体（poppins）？

我想使用名为poppins的google字体，这是字体的url

https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap

。有人知道hot可以这样做吗？

我在

.css

文件中有这个配置

module.exports = {
  theme: {
     extend: {
        fontFamily: {
           'poppins': ['Poppins'],
        }
     }
  }
}

@font-face{
字体显示：交换；
字体系列：“Nunito”；
字体风格：普通；
字体大小：400；
src:local（'Nunito-Regular'）、local（'Nunito-Regular'），
url（'~assets/fonts/Nunito-400-cyrillic-ext1.woff2'）格式（'woff2'）；
}

在我的

tailwind.config.js

文件中

module.exports = {
  theme: {
     extend: {
        fontFamily: {
           'poppins': ['Poppins'],
        }
     }
  }
}

fontFamily:{
// https://tailwindcss.com/docs/font-family#customizing
SAN:[
“努尼托”
],
},

因此，我可以在标记中使用它

我是一个无衬线段落。

所以，是的，我的字体是本地的，但也许我的配置也能让你了解如何在你这边设置它

---

然后，您可以在google fonts url中设置font face的

url

键，如下所示：

如果您想直接从google fonts导入并使用它， 然后在

index.html

文件的

部分添加

然后在

tailwind.config.js

文件中

module.exports = {
  theme: {
     extend: {
        fontFamily: {
           'poppins': ['Poppins'],
        }
     }
  }
}

通过在

extend

中定义自己的字体，将保留默认的主题字体并添加/扩展自己的字体

现在，您可以将字体与类

font-poppins

以及

font-sans

等一起使用 您可以通过将回退字体添加到主题扩展中的

poppins

数组来添加回退字体

有关更多信息，请参阅以下链接，