nuxt vuetify谷歌字体

Question

我在vuetify中使用Nuxt。而且我想使用谷歌字体。不幸的是，不可能用main.styl文件覆盖默认字体Roboto。 main.stly的目标是覆盖vuetify样式。我怎么可能用字体（也包括按钮）覆盖所有内容。非常感谢您的帮助

  

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

Answer 1

这样对我有用： 在app.styl中，您将其指定为样式的入口点：

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

Answer 2

不知道它是否仍然有用，但是您可以尝试以下操作：

在您的nuxt.config.js中：

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

在*/assets/variables.styl中：

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

Answer 3

在 nuxt.config.js 中，你可以添加如下，它会自动从谷歌字体中获取。

您不必在 scss 文件中指定字体。它会自动为您执行此操作。