Laravel8+Vue3项目中Tailwind CSS无法加载自定义字体Montserrat问题

问题根因 #

1. 存在字体名拼写错误：手动测试时写的Monserrat为错误拼写，正确字体名为Montserrat
2. Tailwind字体配置未正确生效，或被其他全局样式覆盖
3. 修改配置后未重新编译前端资源，缓存导致旧配置生效

修正步骤 #

1. 修正所有拼写错误 #

全局搜索项目中所有写Monserrat的位置，统一替换为正确的Montserrat。

2. 优化Tailwind配置 #

修改tailwind.config.js的fontFamily配置，补充默认 fallback 字体避免加载失败：

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.js',
        './resources/**/*.vue',
    ],

    theme: {
        customForms: theme => ({
            default: {
                radio: {
                    iconColor: theme('colors.yellow.500'),
                },
            },
        }),
        extend: {
            fontFamily: {
                sans: ['Montserrat', ...defaultTheme.fontFamily.sans],
                serif: ['Montserrat', ...defaultTheme.fontFamily.serif],
                mono: ['Montserrat', ...defaultTheme.fontFamily.mono],
                display: ['Montserrat'],
                body: ['Montserrat']
            }
        }
    },
    variants: {
        extend: {
            opacity: ['disabled'],
        },
    },
    darkMode: 'media',
    plugins: [
        require('@tailwindcss/custom-forms'),
    ],
};

3. 清除覆盖的全局样式 #

检查以下位置是否存在设置font-family: Nunito的代码，找到后直接删除：

• resources/sass/_variables.scss
• resources/sass/_layout.scss
• 项目全局布局Blade文件（如resources/views/layouts/app.blade.php）的内联样式、引入的外部CSS资源

4. 添加兜底全局样式（可选） #

在app.scss中添加base层全局样式，确保优先级高于默认配置：

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 新增兜底样式 */
@layer base {
  html, body {
    font-family: 'Montserrat', sans-serif;
  }
}

@import "variables";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "layout";

5. 重新编译并清除缓存 #

执行以下命令重新编译前端资源、清除Laravel视图缓存：

# 开发环境编译
npm run dev
# 生产环境编译
# npm run build

# 清除Laravel视图缓存
php artisan view:clear

编译完成后浏览器按Ctrl+F5强刷页面清除本地缓存即可生效。

内容的提问来源于stack exchange，提问作者Grzyb9k