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

【问题标题】：apply custom fonts to all elements on all pages将自定义字体应用于所有页面上的所有元素
【发布时间】：2021-06-04 13:22:29
【问题描述】：

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

这就是我所拥有的：

一个包含字体所有 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 中，将其应用于正文中的所有元素（如果我没记错的话）

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

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

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

但是在查看字体时，我知道它是错误的，并且我可以看到它，因为它是错误的渲染字体

关于如何使它工作的任何想法？谢谢

【问题讨论】：

标签： reactjs next.js tailwind-css

【解决方案1】：

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

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

在顺风配置中这样指定

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

这个解决方案对我有用

【讨论】：

嗨，确实是我需要导入字体，但我在本地确实有它们，所以在我的 scss 文件中添加它时它可以工作，@font-face { font-family: “Fira Sans Extra Condensed”；字体粗细：400； src: url(../../config//fonts/FiraSansExtraCondensed-Regular.ttf) 格式("TrueType"); }