nextjs中使用tailwindcss添加自定义字体

写在前面

项目框架

next.js
tailwindcss
app router

步骤

在public目录中添加字体文件（我的是个.TTF文件）

在global.css文件中添加字体

/* 自定义字体，注意这里url()中路径已然是public目录下 */
@font-face {
  font-family: "lcd-font";
  src: url("/DS-DIGIB.TTF") format("truetype");
}

在tailwind.config.js中配置字体

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans-serif': 'Helvetica, Arial, sans-serif',
        'serif': 'Georgia, "Times New Roman", Times, serif',
        'monospace': 'Courier New, monospace',
        // 👇在这里添加好刚才的字体
        'lcd': "lcd-font", 
      }
      // 省略
    },
  },
  // 省略
}