Nuxt.jsのOnsenUIのfont-familyの変え方

環境

• Windows 7
• Nuxt.js
• onsenui: 2.10.5

はじめに

Nuxt.js×OnsenUI×VuetifyでPWAアプリを作ってるのですが、カスタムフォントを適用しようとしてハマったので
やり方をメモしておきます。
ちなみにフォントはあんずもじさんを利用させて頂きました。
文字感はこんな感じ

よき！

フォントを設定

まずは使いたいフォントをダウンロードしたら、それをassets/cssディレクトリに置きます。
※cssフォルダがなければ作成します
※この記事ではAPJapanesefont.woff2という名前のフォントファイルを置きました。

次にfont-familyとして利用するためにstyles.scssを以下のように作成しassets/cssディレクトリに置きます。

styles.scss

@font-face {
  font-family: 'MyFont';
  src: url('./APJapanesefont.woff2') format("woff2");
}

最後にstyles.scssファイルを読み込むための設定をnuxt.config.jsに追記します。

nuxt.config.js

  css: [
    { src: '~assets/css/styles.scss' }
  ],

これでカスタムフォントをMyFontという名前でfont-familyの一員として利用できるようになりました！

フォントの適用

利用できるようになったMyFontを実際にサイトに適用してみます。

まずnode_modules/nuxt-onsenui-module/plugin.jsを開き、OnsenUIが現在利用しているcssファイルを特定します。

import 'onsenui/css/onsen-css-components.css'`

次に上記のファイルを開き、font-familyを以下の通り修正します。

修正前：

.page {
  font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

修正後：

.page {
  font-family: -apple-system, 'MyFont','Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;

これでサイトにMyFontが適用されました！

おわりに

一応これで適用できたものの、node_modulesをいじるのはかなりイケてないですよね。。
できればassetsフォルダ内だけで完結させたかったですが、やり方が分かりませんでした。。
良い方法をご存知の方がいらっしゃればぜひコメントで教えて頂ければ幸いです。

余談

ちなみにハマったポイントとしては、ずっとOnsenUIじゃなくてVuetifyで検索しちゃってたところですね。。
だって見た目の話といえばVuetifyって思うじゃんかよー。