Nuxt.js+Tailwind CSSでフォントファイルを読み込む方法

2021/07/25

#Vue.js/Nuxt.js

備忘録として残しておきます。

フォントファイルの配置


フォントファイルをプロジェクトの任意の場所(今回はstaticフォルダ直下)に保存します。


読み込み


CSSファイルを編集してフォントファイルを読み込みます。

./assets/css/tailwind.css

@font-face {
  font-family: 名前;
  src: url(~/static/ファイル名);
}
@tailwind base;
@tailwind components;
@tailwind utilities;


設定ファイルの編集


Tailwind CSSのconfigファイルにあるthemeを次のように書き換えます。

theme: {
  extend: {
    fontFamily:{
      "クラスに使う名前":["font-familyの名前"]
    }
  },
},


これで「font-設定ファイルで指定した名前」というクラスが使えるようになっています。


関連記事:Vue.js/Nuxt.js

Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js