nuxt vuetify google font

Question

I use Nuxt with vuetify. And I would like to use google fonts. Unfortunately it is not possible to overwrite the default font Roboto with a main.styl file. The goal in the main.stly is to overwrite the vuetify styl. How is that possible that I overwrite everything with my font (also buttons). Thank you very much for your help

nuxt.config.js

{
    rel: 'stylesheet',
    href:
      'https://fonts.googleapis.com/css?family=Noto+Serif'
  }
css: [
'~/assets/style/app.styl',
'~/assets/style/main.styl'css:],

main.styl

body{
font-family: 'Noto Serif', serif;}

image 01

image 02

You can try, `body{font-family: 'Noto Serif', serif !important;}` — subhasis, Mar 01 '19 at 09:04
Thanks for your Help. That's what I thought. Unfortunately it doesn't work — Thomas.H, Mar 01 '19 at 12:20
Check the answer here. https://stackoverflow.com/questions/51436344/how-to-embed-font-to-all-page-with-nuxt-js/60782370#60782370 — Anees Hameed, Mar 29 '20 at 18:14

score 1 · Answer 1 · answered Apr 29 '20 at 13:04

1

Don't know if it is still relevant, but you can try the following:

In your nuxt.config.js:

vuetify: {
    customVariables: ['~/assets/variables.styl']
}

And in */assets/variables.styl:

$body-font-family = 'Noto Serif', serif

answered Apr 29 '20 at 13:04

Igal

5,833
20
74
132

in nuxt.config.js, the attribute vuetify.treeShake must be explicitly set to true, else this won't work – lorenzo Sep 01 '22 at 09:27

score 1 · Answer 2 · answered Apr 02 '21 at 17:58

1

In nuxt.config.js you can add as follows and it automatically takes from google fonts.

You do not have to specify the font in your scss files. It automatically does that for you.

answered Apr 02 '21 at 17:58

Sudam Dissanayake

136
1
3

score 0 · Answer 3 · answered Mar 01 '19 at 17:17

0

This way it works for me: in app.styl, which you specify as entry-point for your styles:

$body-font-family = 'Ubuntu'
@require '~vuetify/src/stylus/main'

answered Mar 01 '19 at 17:17

DreaMinder

633
4
6

thanks for your help. Too bad with me it doesn't work. look the image 02 – Thomas.H Mar 02 '19 at 06:53

score 0 · Answer 4 · answered Sep 01 '22 at 09:32

In your nuxt.config.js:

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true, // IMPORTANT! Else the default variables won't be overwritten
}

In your assets/variables.scss:

$body-font-family: 'FontName', sans-serif !default;

Linking any documentation is useless because this part of the nuxt documentation is totally ambiguous and misses a lot of things.

nuxt vuetify google font

4 Answers4