无quasar.config文件时如何移除Quasar默认字体

1. 禁用Quasar默认字体 #

你现在的main.js里，在Quasar插件的配置项中添加config.typography.useQuasarFont: false，就能阻止Quasar加载默认的Roboto字体。修改后的代码如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import { createPinia } from "pinia";
import { Quasar } from 'quasar'
import iconSet from 'quasar/icon-set/svg-line-awesome'
import '@quasar/extras/line-awesome/line-awesome.css'
import 'quasar/dist/quasar.css'

import { i18n } from './lang/i18n'
// 注意：确保quasarLang已正确引入

createApp(App)
  .use(i18n)
  .use(createPinia())
  .use(router)
  .use(Quasar, {
    plugins: {},
    lang: quasarLang,
    iconSet: iconSet,
    extras: [],
    // 新增配置：禁用默认字体
    config: {
      typography: {
        useQuasarFont: false
      }
    }
  })
.mount("#app");

2. 引入并全局设置自定义字体 #

在你的style.css（或者单独的字体样式文件）里，先定义自定义字体，再覆盖全局样式：

/* 示例：引入自定义字体（根据你的字体文件路径调整） */
@font-face {
  font-family: 'MyCustomFont';
  src: url('./assets/fonts/MyCustomFont-Regular.woff2') format('woff2'),
       url('./assets/fonts/MyCustomFont-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('./assets/fonts/MyCustomFont-Bold.woff2') format('woff2'),
       url('./assets/fonts/MyCustomFont-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

/* 全局替换字体 */
body, .q-body, .q-page {
  font-family: 'MyCustomFont', sans-serif !important;
}

/* 可选：覆盖Quasar组件的字体，确保所有组件生效 */
.q-btn, .q-input, .q-card, .q-dialog, .q-menu {
  font-family: 'MyCustomFont', sans-serif !important;
}

3. 验证生效情况 #

重启Vite服务后，打开浏览器开发者工具：

• 在Network面板搜索Roboto，确认没有相关资源请求
• 查看页面元素的font-family样式，确认已替换为你的自定义字体

如果还有样式覆盖问题，检查：

• 字体文件路径是否正确，确保能正常加载
• 全局样式的优先级是否足够，必要时用更具体的选择器或!important
• 确认useQuasarFont已设为false，没有遗漏配置

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