Vue CLI v3.0でローカルにあるフォントを適用する

Vue CLIでvue createで作成したプロジェクトに、ローカルにあるフォントを適用するのにてこずったので、メモしておく。

1. src/assets配下にfontsフォルダを作る
2. src/assets/fontsフォルダにフォントファイルを格納する
3. src/assets配下にsassフォルダを作る
4. src/assets/sass配下に以下のようなscssファイルを作る

style.scss

@font-face {
  font-family: 'M PLUS Rounded 1c';
  src: url('~@/assets/fonts/MPLUSRounded1c-Medium.ttf') format('truetype');
}

5.vueのエントリーに当たるmain.jsで以下のように記述し、4.のscssファイルをインポートする

main.js

import './assets/sass/style.scss'

これであとはコンポーネントでfont-familyで上記のフォントを指定してあげれば適用できる。

vue.config.jsをつくってローダーを新たに追加する、なんてことはしなくてよくて、vue cliがいいかんじにフォントのローダーも設定していました。
vue inspect --rulesでwebpackのローダーの設定が確認できます。