背景

これまで、Vue.jsのプロジェクトのstyleタグの中で、font-familyを直書きしてfontを当てていました。
そうすると、長いfont-familyの一文が何度も登場してしまいます。
これは見にくいので改善していきたいという気持ちになり、記事を書くに至りました。

開発環境

macOS: Monterey 12.4
Vite: 2.9.2
Vue: 3.2.25

今回やる事

ローカルに配置したfontファイルの読み込みの定義を行う
mixinの定義を行う
vueファイルのstyleタグ内でmixinを使用してフォントを当てる

それではやっていきましょう。

ローカルに配置したfontファイルの読み込みの定義を行う

何でも良いのですが、今回無料で使用できるfontとして有名なGoogle Fontsを使用します。
可愛かったので、今回RubikDirtというフォントを使用します。
Download allボタンよりダウンロードします。
（良ければお好きなフォントをダウンロードしてみましょう。）

因みにですが、クライアントから求められるフォントがGoogleFontsなどの無料で利用できるフォントではなく、有料のwebフォントであるパターンを想定していますので、今回GoogleFontsをCDNで利用しません。
フォントファイルをサーバーに配置する想定で話を進めていきます。なのでGoogleFontsをダウンロードして使用します。

まずは、フォントを配置するためのディレクトリを作成します。

$ mkdir src/assets/font

ここに、ダウンロードしたフォントを置きます。

次に、fontファイルの読み込みの定義を行うためのディレクトリ・ファイルを作成します。

$ mkdir src/assets/sass
$ touch src/assets/sass/font.scss

fontfaceの定義をします。

font.scss

@font-face {
  font-family: 'RubikDirt';
  src: url('@/assets/font/RubikDirt-Regular.ttf') format('truetype');
}

ここで記述するfont-familyは自分で分かりやすい命名にしましょう。
この名前で実際にstyle指定する事ができるようになります。
また、srcでローカルに配置したフォントファイルへのパスを記載し、読み込めるようにします。
formatに関しては、フォントの拡張子に応じて適切な指定をしましょう。

これらの詳細については、ドキュメントをご覧ください。

mixinの定義を行う

mixinの定義を記述するためのファイルを作成します。
mixinを使う事で、複数の処理をひとまとまりの塊としてまとめる事ができます。

$ touch src/assets/sass/mixin.scss

RubikDirtという名前で定義をします。
名前は自分で分かりやすい命名にしましょう。

mixin.scss

@mixin RubikDirt {
  font-family: 'RubikDirt', sans-serif;
  font-weight: bold;
}

vueファイルのstyleタグ内でmixinを使用してフォントを当てる

次は、定義したものを使えるようにしていきましょう。

エントリーポイントのmain.tsでfontfaceの読み込みをします。
これでプロジェクト内で、ローカルに配置したフォントを使用できる状態となります。

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/sass/font.scss'

createApp(App).mount('#app')

vueファイル内でmixin.scssをimportし、定義した名前でmixinを呼び出します。
@includeで呼び出せます。

sample.vue

<template>
  <div class="title">
    <h1>HelloWorld</h1>
  </div>
</template>

<style scoped lang="scss">
@import '@/assets/sass/mixin.scss';

.title {
  text-align: center;

  h1 {
    @include RubikDirt;
  }
}
</style>

これでローカルに配置したwebフォントを当てる事ができます。

まとめ

経験談として、開発途中でやっぱりこのフォントの太さをもうちょっと細くしたい、という要望があり、
そのフォントを適応している箇所全てを修正した覚えがあります。
そういう時に、mixinならば大元の定義のみ修正すれば完了しますので、楽です。
呼び出し側の記述自体もスッキリするので、気持ちよいですね！