如何使用从NPM(Fontsource)下载的带有Tailwind CSS的字体

Question

我正在做一个Next.js项目，当我从Fontsource下载NPM包时(使用Advent Pro字体(，它会下载到我的node_modules文件夹中。在中，它有字体文件(ttf、toff等(，也有定义@font_face的CSS文件，以便将其导入其他文件。

有问题的NPM包：https://www.npmjs.com/package/@fontsource/降临专业

根据Tailwind的文档，我应该用新的字体(在tailwind.config.js中(扩展Tailwind的默认主题。下面是我的"；"尝试"；在它：

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,tsx,jsx}",
"./components/**/*.{js,ts,tsx,jsx}",
],
purge: [
"./pages/**/*.{js,ts,tsx,jsx}",
"./components/**/*.{js,ts,tsx,jsx}",
],
darkMode: 'class', // or'media' or 'class'  
theme: {
extend: {
colors: {
'cream': '#FFDFBD',
'wood': '#460B0B'
},
backgroundImage: {
'darkModeBG': "linear-gradient(0deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05)), url('~/public/overpass.gif')",
'lightModeBG': "url('~/public/station.gif')"
},
fontFamily: {
titillium: ['Titillium-Web', 'sans-serif'],
adventProHeader: ['Advent Pro', 'sans-serif']
}
},
},
plugins: [],
}

但在网站上，当我将font-adventProHeader应用于<h1>标记时，它会应用无衬线字体。

我不想把node-modules文件夹中的@font_face代码重写到我的globals.css文件中。有办法解决这个问题吗？

Answer 1

root.css

@import '@fontsource/fira-code';
@tailwind base;
@tailwind components;
@tailwind utilities;

顺风配置

theme: {
extend: {
fontFamily: {
fira: 'fira-code, Times New Roman, serif',
},
}
}

你可以在任何html标签中使用：font fira