Nuxt.jsにGoogle Fontsを導入しよう

Google Fontsを制作中のポートフォリオ（Nuxt.js)に導入することができました。
その導入方法になります。

Google Fontsで好きなフォントを探す

Google Fontsにアクセスして使いたいフォントを探します。
https://fonts.google.com/

filter機能で言語をJapaneseにすると探しやすいです。また、Previewの下の欄にテキストを入力するとその見た目を確認できます。画像ではこんにちはとしています。

導入したいフォントが決まったらそのフォントを選択します。
例としてDela Gothic Oneを選択しました。

Dela Gothic Oneのページで下に少しスクロールすると、Regular 400というのがでてきます。

右側にあるSelect Regular 400ボタンをクリックします。

すると、右からウィンドウが出てきてlinkが生成されます。

nuxt.config.jsで記載するのでこちらをコピーしておきます。
href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet"
これでGoogle Fontsを使う準備ができました。

ちなみに、画面右上にある買い物バッグのアイコンを押すとこのウィンドウが開き、自分が選択したフォントを確認することができます。

nuxt.config.jsの設定

nuxt.config.jsを開いて、headのlinkに先ほどコピーしたURLを記入します。

nuxt.config.js

  head: {
    title: "hogehoge",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href: "https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap",
      },
    ],
  },

フォントの適用

最後に適用したいコンポーネントで下記のように記載すれば完了です。これでGoogle Fontsが適用されます。
自分はアプリのタイトルに適用したかったので下記のようになりました。

<template>
  <nuxt-link to="/" class="text-decoration-none">
    <app-title class="custom-app-title" />
  </nuxt-link>
</template>

<style scoped>
.custom-app-title {
　　　　font-size: 22px;
  font-family: "Dela Gothic One", sans-serif;　/* 追加 */
}
</style>

おわりに

思ったより簡単にGoogle Fontsを導入することができました。
Google Fontsを導入することで少し洗練された見た目になったかなと思います。
間違い等ありましたらご指摘頂けますと幸いです。