以下は、Adobe FontsのプロジェクトIDの確認方法から、Nuxt 3のuseHeadを使ったフォントの適用までをブログ形式でまとめた内容です。参考にしてください！
Nuxt 3でAdobe Fontsを使う方法：useHeadで簡単実装
はじめに
Nuxt 3ではuseHeadを使って柔軟にHTMLの<head>要素をカスタマイズできます。この記事では、Adobe FontsをNuxt 3に組み込む方法を解説します。
Adobe FontsでプロジェクトIDを確認
- Adobe Fontsにアクセスしてログインします。
- 使用したいフォントを選び、「Webプロジェクト」に追加します。
- 作成したWebプロジェクトを開くと、以下のような埋め込みコードが表示されます：
<linkrel="stylesheet"href="https://use.typekit.net/xxxxxx.css">
- 上記の
xxxxxx部分がプロジェクトIDです。このIDを後ほどNuxtで使用します。
Nuxt 3での実装
1. プロジェクトの準備
Nuxt 3プロジェクトがない場合、以下のコマンドで作成します：
npx nuxi init nuxt-adobe-fonts cd nuxt-adobe-fonts npm install
2. Adobe FontsをuseHeadで追加
Nuxt 3では<script setup>内でuseHeadを使うことで、ページごとにカスタムの<head>設定が可能です。以下のように実装します：
pages/index.vue
<script setup lang="ts">
// useHeadを使ってAdobe Fontsを設定
useHead({
link: [
{
rel: 'stylesheet',
href: 'https://use.typekit.net/xxxxxx.css' // xxxxxxにプロジェクトIDを置き換え
}
]
});
</script>
<template>
<div class="custom-font">
Welcome to Nuxt 3 with Adobe Fonts!
</div>
</template>
<style scoped>
.custom-font {
font-family: "YourAdobeFont", sans-serif; /* Adobe Fontsで指定したフォント名 */
}
</style>3. 確認とデバッグ
ローカルで確認
以下のコマンドで開発サーバーを起動し、フォントが適用されているか確認します：
npm run dev
ブラウザでhttp://localhost:3000を開き、フォントが適用されていれば成功です。
フォントが適用されない場合
まとめ
Nuxt 3でAdobe Fontsを使用するのはとても簡単です。useHeadを使えば、特定のページやコンポーネントにのみフォントを適用するなど、柔軟な実装が可能です。
ポイントのおさらい
これで、おしゃれなフォントを使ったNuxt 3の開発を楽しみましょう！