Zenn
🎨

【Vue】Vuetify使用時のfont-family変更方法

2023/06/03に公開
Scss
Vue.js
Vuetify
tech

やりたいこと

  • Vue/Vuetifyプロジェクトのフォントを游ゴシック・RobotoからNoto Sans JPへ変更したい
    • 該当箇所はサービス内で使用されているテキストすべて

問題

  • Vuetifyのv-application, Typography options が使用されている箇所で、任意のフォントになぜか上書きできない

原因

  • 下記URLに記載のある**.scss でfont-familyの定義をしているが、vuetify.min.css によって上書きされている

https://vuetifyjs.com/en/features/sass-variables/

解決策

  • vuetify.min.css はclass指定で定義されているので、カスタム定義はid指定で定義する。
    • スタイルの優先順位は、id > class の順に適用されるのでその仕組を利用する

https://www.htmq.com/csskihon/007.shtml#:~:text=CSSのルールでは、全称,セレクタが優先されます。

  • 適用したいタグやVuetify optionsに対して、任意のfont-familyを設定する

  • コード例

    // app/assets/stylesheets/vuetify/custom.scss

$body-font-family: 'Noto Sans JP' !important;

// Vuetifyが提供しているTypography系のoptions一覧
$vuetifyTypographyOptions: text-h1, text-h2, text-h3, text-h4, text-h5, text-h6, text-headline,
  text-title, text-subtitle-1, text-subtitle-2, text-body-1, text-body-2, text-button, text-caption,
  text-overline;

// テキスト関係のHTMLタグ一覧
$htmlTags: div, span, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, address, code, small, strike, strong,
  center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
  tr, th, td, article;

#app {
  font-family: $body-font-family;

  // Vuetifyのtypography option使用箇所にすべて指定のfont-familyを上書きする
  @each $vuetifyTypographyOption in $vuetifyTypographyOptions {
    .#{$vuetifyTypographyOption} {
      font-family: $body-font-family;
    }
  }

  // HTMLタグ使用箇所にすべて指定のfont-familyを上書きする
  @each $htmlTag in $htmlTags {
    #{$htmlTag} {
      font-family: $body-font-family;
    }
  }
}

所感

  • フォントの変更は一瞬でできるかと思ったら、思わぬ落とし穴があった
  • Vuetifyによるフォントの問題は、バージョン関係ないみたい。
  • Vuetifyの作りとしてimportantが付与されるようになっているので、カスタマイズしづらいという印象を受けた

参考サイト

https://github.com/vuetifyjs/vuetify/issues/8169

Discussion