Nuxt.jsでTypekitのWebフォント(外部リソース)を使う方法

Nuxt.jsで作るサイトでAdobeのフォントライブラリ「Typekit」を使う場面があったので、その方法を書き残しておきます。

ちなみに、基本的な外部リソースの使い方はNuxt.jsの公式ドキュメントに載っているので、そちらも参照してみてください。

外部リソース – Nuxt.js 

では、早速順を追って説明します。

前提

前提として、

  • Nuxt.jsでプロジェクトを作ったことがある
  • Nuxt.jsの環境構築ができている

という方を対象にします。ですので、初歩的な部分は省きます。

Nuxt.jsでTypekitのWebフォントを使う手順

Adobe Fontsでフォントを選び、「Webプロジェクト」を作成する

まずは、Adobe Fontsのサイトでフォントを選びます。

フォントが決まったら、「Webプロジェクト」をクリックし、該当するフォントを含むプロジェクトを作成してください。

コードを取得する

すると、そのままの流れで貼り付けるためのコードが出現するので、コピーします。

今回貼り付けるコードはこちら。これをconfig的なファイルにコピペすればいいということですね。

公式ドキュメントの「ビュー」の説明を読んでいただきたいのですが、Nuxt.jsにはアプリケーションのテンプレートを変更する方法が用意されています。

具体的には、ルートディレクトリにapp.htmlを用意し、その雛形を修正していきます。以下がNuxt.jsのデフォルトのテンプレートです。

app.htmlにコードを貼り付ける

上記のapp.htmlの<head>内に、コピーしたscriptをまるっと貼り付けます。

これで保存すると、無事読み込まれます。

あとは、テンプレートのCSSで読み込んだfont-familyに指定すると、そのフォントで表示されるように反映されているかと思います。

created by Rinker
¥3,240 (2019/05/25 21:48:28時点 Amazon調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)