Search code examples
fontsvuetify.jsfont-facelaravel-mix

Override default font by custom font in Vuetify / Vuejs / Laravel

I want to use local fonts in my project so I downloaded them from Google and placed them in my public/fonts directory as you can see in the image below:

enter image description here

Like described in the documentation I override the Sass variables from Vuetify. In the file that overrides the default variables from Vuetify I added the custom fonts like this:

/* changa-one-regular - latin */
@font-face {
  font-family: 'Changa One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/changa-one-v13-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/changa-one-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/changa-one-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/changa-one-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/changa-one-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/changa-one-v13-latin-regular.svg#ChangaOne') format('svg'); /* Legacy iOS */
}
/* changa-one-italic - latin */
@font-face {
  font-family: 'Changa One';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/changa-one-v13-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/changa-one-v13-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/changa-one-v13-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/changa-one-v13-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/changa-one-v13-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/changa-one-v13-latin-italic.svg#ChangaOne') format('svg'); /* Legacy iOS */
}

/* nunito-sans-300 - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/nunito-sans-v6-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/nunito-sans-v6-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/nunito-sans-v6-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/nunito-sans-v6-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/nunito-sans-v6-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/nunito-sans-v6-latin-300.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
/* nunito-sans-regular - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-sans-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/nunito-sans-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/nunito-sans-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/nunito-sans-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/nunito-sans-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/nunito-sans-v6-latin-regular.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
/* nunito-sans-700 - latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/nunito-sans-v6-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/nunito-sans-v6-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/nunito-sans-v6-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/nunito-sans-v6-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/nunito-sans-v6-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/nunito-sans-v6-latin-700.svg#NunitoSans') format('svg'); /* Legacy iOS */
}

// Globals
$body-font-family: 'Nunito Sans' !important;
$font-family: 'Nunito Sans' !important;
$heading-font-family: 'Changa One' !important;

$btn-font-weight: 700;

//all variable changes need to happen before @import
//specificity needs to be taken into consideration for some components
//because !important has been assigned to their css
//https://dev.to/emmabostian/css-specificity-1kca
html,
body,
.v-application {
  font-family: $body-font-family;
}

.v-application {
  font-family: $body-font-family, sans-serif !important;
}

$material-dark: (
  'background': #000
);

//added all typography helper classes because of css specificity override
//https://vuetifyjs.com/en/styles/typography#typography 
.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;
    }

    h1 {
      font-family: $heading-font-family;
      font-weight: 400;
      font-style: italic;
    }
}

@import '~vuetify/src/styles/settings/_variables.scss';

When I run npm run watch I get the following errors:

Error: Can't resolve '../fonts/changa-one-v13-latin-italic.eot' in 'D:\laragon\www\we-are\node_modules\vuetify\src\components\VSnackbar'
    at finishWithoutResolve (D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:293:18)        
    at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:362:15
    at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
    at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
    at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
    at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
    at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
    at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)

What is the reason that it doesn't get my custom added fonts? Am I missing something? My webpack.mix file is configured like this:

const mix = require('laravel-mix');
require('vuetifyjs-mix-extension')

mix
    .js('resources/js/app.js', 'public/js')
    .vuetify('vuetify-loader', 'resources/sass/variables.scss', { progressiveImages: true })
    .sourceMaps(true)
    .vue()
    .sass('resources/sass/main.scss', 'public/css')
    .copy('resources/assets', 'public/assets')
    .browserSync({
        proxy: '127.0.0.1:8000',
        port: 3000,
        ui: false,
        https: true,
        files: ['app/**/*.php', 'resources/**/*', 'public/**/*'],
        snippetOptions: {
            rule: {
                match: /<\/head>/i,
                fn: function (snippet, match) {
                    return snippet + match;
                },
            },
       
          },
    });
Solution

  • https://vuetifyjs.com/en/features/sass-variables/#caveats

    You should not have any actual styles in the variables file, only variables. The font-face and other style declarations should go in a separate file that you then import into app.js