I have attempted all of the suggested solutions without success.

However, I found that by following the instructions at this link, I was able to make it work.

Firstly, create a directory called scss inside the src folder (not /src/styles/scss/ or any other variation). Next, place your new variables values in there.

// /src/scss/variables.scss

$body-font-family: 'Less';
$heading-font-family: $body-font-family;

// Required for modifying core defaults
@import '~vuetify/src/styles/styles.sass';

The issue stems from the use of !important on the font-family property for vuetify typography helper classes.
To resolve this, I made adjustments in my variables.scss file by ensuring the same level of CSS specificity. Since this file is loaded after the vuetify typography helper classes, it effectively overrides them.

Here's a snippet from my variables.scss file:

// All variable changes must occur before @import
$body-font-family: 'Source Sans Pro', sans-serif !important;
// Consider specificity for certain components due to !important in their CSS
html,
body,
.v-application {
  font-family: $body-font-family;
}
// Included all typography helper classes to override css specificity 
.v-application {
    .display-4,
    .display-3,
    .display-2,
    .display-1,
    .headline,
    .title,
    .subtitle-1,
    .subtitle-2,
    .body-1,
    .body-2,
    .caption,
    .overline
    {
        font-family: $body-font-family;
    }
}
@import '~vuetify/src/styles/settings/_variables.scss';

If you encounter any issues, inspect the element defaulting to the Roboto font, check the font-family attribute, identify the causing CSS classes, and add those classes to CSS selectors in the variables.scss file (e.g., .v-application .title)

I encountered a similar issue with $body-font-family, and this was my initial attempt:

$body-font-family : 'ArbitrayFont' !important;
@import '~vuetify/src/styles/styles.sass';

However, after some persistence, I realized that in order to make the vuetify sass variable work, I needed to explicitly assign it to specific elements like so:

 $body-font-family : 'ArbitrayFont' !important;
 html,
body,
.v-application,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $body-font-family;
}

@import '~vuetify/src/styles/styles.sass';

Greetings! After a period of time, I have aligned all my fonts using the method below.

// src/sass/main.scss
$my-font-family: "Raleway", sans-serif !default;


@import "~vuetify/src/styles/styles.sass";
$body-font-family: $my-font-family;

@import "~vuetify/src/styles/settings/variables";
$body-font-family: $my-font-family;

//Revamp all font styles for headings
$headings: map-merge($headings, (
        'h1': map-merge(
                        map-get($headings, 'h1'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h2': map-merge(
                        map-get($headings, 'h2'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h3': map-merge(
                        map-get($headings, 'h3'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h4': map-merge(
                        map-get($headings, 'h4'),
                        (
                                'font-family': $body-font-family
                        )
        ),
        'h5': map-merge(
                        map-get($headings, 'h5'),
                        ( 'font-family': $body-font-family )
        ),
        'h6': map-merge(
                        map-get($headings, 'h6'),
                        ( 'font-family': $body-font-family )
        ),
        'subtitle-1': map-merge(
                        map-get($headings, 'subtitle-1'),
                        ( 'font-family': $body-font-family)
        ),
        'subtitle-2': map-merge(
                        map-get($headings, 'subtitle-2'),
                        ( 'font-family': $body-font-family)
        ),
        'body-2': map-merge(
                        map-get($headings, 'body-2'),
                        ( 'font-family': $body-font-family)
        ),
        'body-1': map-merge(
                        map-get($headings, 'body-1'),
                        ( 'font-family': $body-font-family)
        ),
        overline: map-merge(
                        map-get($headings, 'overline'),
                        ( 'font-family': $body-font-family)
        ),
        caption: map-merge(
                        map-get($headings, 'caption'),
                        ( 'font-family': $body-font-family)
        )
));

Remember to include the main.scss in your vue.config.js https://vuetifyjs.com/en/customization/sass-variables

According to the Vuetify 2.0 documentation, it is recommended to define default variables before importing any initial styles.

It's important to note that in some cases, adding !important may be necessary for the changes to take effect. Hopefully, this tip proves useful to you.

// src/sass/main.scss

// Any modifications to default variables should be
// specified prior to the initial style import
$body-font-family: 'Source Sans Pro', cursive !important;

$heading-font-family: $body-font-family, cursive !important;

// Essential for altering core defaults
@import '~vuetify/src/styles/styles.sass';

$titles: map-merge(map_get($headings, title), ( title: ( font-family: $title-font) ));

I read in the updated documentation v2.0 that this should work, but unfortunately it's not functioning as expected for me.