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

コード 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-設定ファイルで指定した名前」というクラスが使えるようになっています。

コメント

タイトルとURLをコピーしました