在 Tailwind CSS 和 Laravel 中添加字体

Posted 2023-03-06

【中文标题】在 Tailwind CSS 和 Laravel 中添加字体

【英文标题】：Adding fonts in Tailwind CSS and 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>

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

【参考方案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;