Skip to content

Overriding $body-font-family via SASS requires !important CSS override due to specificity #312

Closed
@asennoussi

Description

@asennoussi

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 in nuxt.config.ts via the css 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions