Nuxt.jsで好きなフォントを使う

Nuxt.jsで自分の好きなフォントを使いたい。

Nuxtで好きなフォントを使う方法の覚書です。

まず好きなフォントをどこからかダウンロードしてきます。

自分は今回はPigmo-01を使ってみます。ちなみにファイルの拡張子は.otfです。

次にassetsフォルダの中にcssフォルダとfontフォルダを作りました。
cssフォルダの中にstyles.scssを作って、持ってきたフォントのファイルはfontフォルダに入れます。
すでにcssフォルダやstyles.scssやstyles.cssを作成済みの時は追記でOKです。

└── assets
    ├── css 
    │    └── styles.scss 
    └── font 
         └── Pigmo-01.otf // 持ってきたフォントのファイル
    

styles.scssに以下のように記述します。

assets/css/styles.scss

@font-face {
  font-family: 'HogeHogeFont'; // <-好きな名前をつけれます。
  src: url('../font/Pigmo-01.otf') format("opentype");
}

srcはフォントのアドレスです。ここでformatって何となりました。
私は、はじめこのformmatの記述を間違えていてフォントが適用されなくて詰まりました。

調べてみると、

Web Open Font Format: format("woff")
TrueType          : format("truetype")
OpenType          : format("opentype")
Embedded-OpenType : format("embedded-opentype")
SVG               :format("svg")

とあるようです。
拡張子.otfだからopentypeなのかと思いながら調べていると、フォントをダウンロードした時のフォルダ内にあった使用説明のtxtファイルにきちんとFormatはOpenTypeであると書いてありました。
きちんと読まないといけないですね。

最後にnuxt.config.jsonでCSSを読み込み

最後に設定ファイルにCSSの読み込みを記述します。

nuxt.config.json

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

これで、なんか書いてみると、

test.vue

<template lang="pug">
  div.test Hello Funny Font!!
</template>

<style lang="scss" scoped>
  .test{
         font-family: 'HogeHogeFont';
       }
</style>

おおーできたー！となりました。

まとめ

font-faceの仕様はオプションもあります。
font-weit、font-style,font-stretchとか他にも色々設定できるようです。
これで変わったフォントとか面白いフォントとかNuxtで使えます。
フォント探すのが楽しくなります。
自分の為の覚書でありますが、
自分と同じようなプログラミング初級者の方の為になれば幸いです。
間違いのある情報を書いてしまっている事があれば指摘下さい。