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

[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.

[userquin]

what's the content of your settings.scss file?

can you try with this?

@use 'vuetify/settings' with (
  $body-font-family: 'Dubai', sans-serif
);

[asennoussi]

// File: assets/scss/settings.scss
// Contains ALL SASS variable definitions (moved from vars.scss)
// AND Vuetify SASS variable overrides.
// This file is loaded globally via nuxt.config additionalData using `@use ... as *;`
// AND referenced by vuetify moduleOptions.styles.configFile.

// --- Variable Definitions ---
// Define standard radius (example value, adjust as needed)
$standard-radius: 8px;
$small-radius: 4px;

// Define colors (mapped from your Nuxt 2 SCSS)
// Theme Colors (Primary, Accent etc. should ideally be defined in Vuetify theme settings)
$mahkamaty-blue-color: #0153B2;
$mahkamaty-blue-color-alt: #0061cc; // Example alt color
$mahkamaty-purple-color: #7C37A9;
$default-accent-color: #f5ba26;

// Text Colors
$default-text-color: #2b313d;
$light-blue-text-color: #8996b3;
$grey-color: #596172;

// Background Colors
$page-background-color: #f6f6f6;
$white-color: #ffffff;
$light-grey-color: #e6e6e6; // Example light grey

// Semantic Colors
$green-color: #00663A; // Example green
$light-green-color: #E3F1EA; // Example light green
$red-color: #B30000; // Example red
$light-red-color: #fdecea; // Example light red
$light-yellow-color: #fffbeb; // Example light yellow

// Other
$border-color: #e0e0e0; // Example border color
$standard-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); // Standard elevation shadow

// Font family (matches app.vue)
$body-font-family: 'Dubai', sans-serif;
// --- End Variable Definitions ---


// Set default border radius for Vuetify components
$border-radius-root: $standard-radius; // Example: Use the variable defined above

// --- End Vuetify Overrides ---

// DO NOT put @font-face or general styles here.

[AndreyYolkin]

In your file, construction

@use 'vuetify/settings' with (
)

is missing. Please try with the way it described in docs

I suppose you are migrating from nuxt/vue 2. So in vuetify 3 new sass import system is used, no more @import's

[asennoussi]

Thanks that worked (used @forward)