覆盖标题字体 Vuetify + Nuxt

Question

我正在尝试更改 Vuetify + Nuxt 设置中标题标签的默认字体。我检查了 this question 但这不适用于 Nuxt 在我的 assests/variables.scss:

// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
// $font-size-root: 20px;
@import '@fontsource/ledger/latin.css';
@import '@fontsource/raleway/latin.css';


$font-size-root: 16px;
$body-font-family: Raleway, Helvetica, sans-serif;
$heading-font-family: serif !important;


$headings: (
    'h1': (
        'font-family': $heading-font-family,
    ),
    'h2': (
        'font-family': $heading-font-family,
    ),
    'h3': (
        'font-family': $heading-font-family,
    ),
    'h4': (
        'font-family': $heading-font-family,
    ),
    'h5': (
        'font-family': $heading-font-family,
    ),
    'h6': (
        'font-family': $heading-font-family,
    ),
);


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

但是我的标题字体还是Raleway。当我检查 h1 标签时，我看到了这个：

在 docs 中，它们显示标题使用的值：

还有什么我需要覆盖的吗？

Answer 1

将字体系列名称应用到您想要设置样式的变量，然后 install the font 您想要并从 node_modules 导入它或通过 URL.

导入

assets/variables.scss

 $font-size-root: 16px;
    
    $heading-font-family: "Roboto", sans-serif;
    $body-font-family: "Roboto", sans-serif;
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: $heading-font-family;
    }
    
    @import "@fontsource/roboto/latin.css";
    @import "~vuetify/src/styles/styles.sass"; //this has to be last

覆盖标题字体 Vuetify + Nuxt

Override heading font Vuetify + Nuxt

sass

nuxt.js

vuetify.js