Nuxt JSとToodWindowでローカルフォントを使用する方法.js

このアイデアは、Nuxt js、TailWindCSS、およびTypeFacesを同時に使用したいときに来ます.
始めましょう!

選択して書体
Typefacesは多くのフォント家族と一緒に来ます、しかし、このチュートリアルでは、私はInterとMetropolisを使います.
パッケージを追加

yarn add typefaces-inter
yarn add typefaces-metropolis

または

npm install typefaces-inter
npm install typefaces-metropolis

プラグインの追加
ディレクトリに新しいファイルを追加します.
例:npm install

import "typeface-inter";
import "typeface-metropolis";

そして、Nuxtで登録してください.設定.js

export default {
  ...
  plugins: ["~/plugins/typeface.js"],
  build: {
    ...
    transpile: ["typeface-inter", "typeface-metropolis"]
  },
}

設定風設定
今、我々はローカル風フォントを

module.exports = {
  ...
  theme: {
    fontFamily: {
      display: "Metropolis",
      body: "Inter"
    }
  },
  ...
};

我々は完了です!
メトロポリスフォントのpluginsクラス、フォント間の/plugins/typeface.jsクラスを使用します.
これをするより良い方法があるならば、知らせてください.読書ありがとう!