将自定义字体应用于所有页面上的所有元素

Question

我正在尝试为所有元素添加自定义字体，这样我就不必在每个带有类名的文本元素上指定它

这是我的：

包含字体的所有 ttf 文件的文件夹。

我的tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'theme_white': '#a4a7b5',
        'theme_black': '#121212',
      },
      fontFamily: {
        'body': ["'Fira Sans Extra Condensed'"]
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

这是我自己的css，把它应用到body里面的所有元素（如果我没记错的话）

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

@layer base{
    body {
        @apply font-body;
    }
}

如果我在一个元素上指定 className 'font-body' 它可以工作，但是当什么都不指定并且我查看开发工具时，我可以看到应用了 css。

但是在查看字体时我知道它是错误的并且我能看到它是因为它是错误呈现的

知道如何让它发挥作用吗？谢谢

Answer 1

尝试像这样在 css 文件中导入字体

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed&display=swap');

并在顺风配置中这样指定

body: [ "'Fira Sans Extra Condensed'", 'sans-serif' ]

这个解决方案对我有用

将自定义字体应用于所有页面上的所有元素

apply custom fonts to all elements on all pages

reactjs

next.js

tailwind-css