在 Tailwind CSS 和 Laravel 中添加字体答案

【问题标题】：Adding fonts in Tailwind CSS and Laravel在 Tailwind CSS 和 Laravel 中添加字体
【发布时间】：2021-07-04 11:16:30
【问题描述】：

我对 Laravel 和 Tailwind 还很陌生，但我正在尝试学习不同的项目。目前，我正在导入字体。我已经从谷歌字体下载了字体，它给了我一个 TTF 文件。我把它放在 /resources/fonts/NewTegomin-Regular.ttf 中。现在我不知道如何使用这种字体。

app.css

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

@layer base{
    @font-face {
        font-family: 'New Tegomin';
        src: url(../fonts/NewTegomin-Regular.ttf) format("truetype");
    }
}

tailwind.config.js

module.exports = {
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        'chalk': ['New Tegomin', 'serif']
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

HTML

<div class="logo flex items-center font-chalk text-3xl">Title</div>

我在这里遗漏了什么明显的东西吗？

【问题讨论】：

标签： laravel fonts tailwind-css

【解决方案1】：

我建议您在app.css or main css file 上导入字体

@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');

@layer base {
    body {
        font-family: 'New Tegomin', sans-serif;
    }
}

【讨论】：