Description
Custom Font Override Issue in Vuetify 3 + Nuxt 3 Setup
When setting a custom $body-font-family
using Vuetify 3 SASS variables within a Nuxt 3 project, the default font-family: Roboto
applied by Vuetify's base styles often overrides the custom font due to CSS specificity.
This requires adding a manual CSS override with !important
targeting .v-application
(or similar selectors) to force the custom font, even when the SASS variable configuration seems correct.
🐞 To Reproduce
1. Setup
- Nuxt 3 project using
vuetify-nuxt-module
.
2. Define Custom Font
- Add
@font-face
rules for a custom font (e.g.,'Dubai'
) in a globally included CSS file:
assets/css/fonts.css
- Include
fonts.css
innuxt.config.ts
via thecss
array. - Ensure font files are correctly placed in
public/fonts
.
3. Configure Vuetify SASS
- Create a SASS variables file:
assets/scss/settings.scss
- Define the custom font family:
$body-font-family: 'Dubai', sans-serif;
4. Configure nuxt.config.ts
- Ensure the
settings.scss
is used as the Vuetify SASS variables file. - (Include actual config snippet if relevant.)
5. Observe
- Run the development server.
- Inspect text elements within Vuetify components.
✅ Expected Behavior
The custom font ('Dubai'
) defined in $body-font-family
should be applied globally to Vuetify components and the application base, inheriting correctly without needing further overrides.
❌ Actual Behavior
- The browser's computed
font-family
on many elements defaults to Roboto. - This indicates Vuetify's base styles are overriding the custom font due to higher specificity.
- The custom font only applies correctly if a CSS override like the following is added (e.g., in
app.vue
):
.v-application {
font-family: 'Dubai', sans-serif !important;
}
🧪 Environment
- Vuetify Version: [latest]
- Nuxt Version: [lates]
- Node Version: [20]
- OS: [OSX]
📌 Additional Context
This suggests that while the SASS variable override mechanism works for configuring Vuetify’s SASS compilation, the resulting CSS rule for the custom font doesn’t have sufficient specificity to override the default Roboto
font applied by Vuetify’s base stylesheet in all contexts.
Using !important
is a workaround, but less ideal than relying solely on the SASS variable.