fonts.mdx

title	description	i18nReady
カスタムフォントの使用	Astro Webサイトにカスタム書体を使用したいですか？ FontsourceでGoogle Fontsを使用するか、お好みのフォントを追加してください。	true

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

このガイドでは、プロジェクトにウェブフォントを追加し、コンポーネントで使用する方法を紹介します。

ローカルのフォントファイルを使う

以下の例では、DistantGalaxy.woffというフォントファイルを使ってカスタムフォントを追加する方法を説明します。

1. public/fonts/にフォントファイルを追加します。

2. CSSに以下の@font-face文を追加します。追加する場所は、インポートするグローバルな.cssファイルでも、<style is:global>ブロックでも、このフォントを使用したいレイアウトやコンポーネントの<style>ブロックでもかまいません。

   /* カスタムフォントファミリーを登録し、ブラウザにその場所を知らせます。 */
   @font-face {
     font-family: 'DistantGalaxy';
     src: url('/fonts/DistantGalaxy.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }

3. コンポーネントやレイアウトにスタイルを設定するには、@font-face文で指定したfont-familyを使用します。この例では、見出しの<h1>にはカスタムフォントが適用され、段落の<p>には適用されません。

   ---
   // src/pages/example.astro
   ---
   
   <h1>はるかかなたの銀河系で…</h1>
   
   <p>カスタムフォントを使うと、見出しがよりカッコよくなりますね！</p>
   
   <style>
   h1 {
     font-family: 'DistantGalaxy', sans-serif;
   }
   </style>

Fontsourceを使う

Fontsourceプロジェクトにより、Google Fontsやその他のオープンソースのフォントを簡単に使用できます。使用したいフォントをnpmモジュールとしてインストールできます。

1. Fontsourceのカタログで使用したいフォントを探します。例として、ここではTwinkle Starを使用します。

2. 選択したフォントのパッケージをインストールしてください。

   ```shell npm install @fontsource/twinkle-star ``` ```shell pnpm add @fontsource/twinkle-star ``` ```shell yarn add @fontsource/twinkle-star ```

   :::tip 正しいパッケージ名は、Fontsourceのウェブサイトの各フォントページの「Quick Installation」セクションに記載されています。@fontsource/または@fontsource-variable/で始まり、その後にフォントの名前が続きます。 :::

3. フォントを使用したいコンポーネントで、フォントパッケージをインポートします。通常は、サイト全体でフォントを利用するために、共通のレイアウトコンポーネントでこれを行います。

   インポートすると、フォントを設定するのに必要な@font-faceルールが自動的に追加されます。

   ---
   // src/layouts/BaseLayout.astro
   import '@fontsource/twinkle-star';
   ---

4. そのフォントのFontsourceページのbodyの例に記載されている名前をfont-familyとして使用します。AstroプロジェクトでCSSを書ける場所であればどこでも指定できます。

   h1 {
     font-family: "Twinkle Star", cursive;
   }

Tailwindでフォントを登録する

Tailwindインテグレーションを使用している場合は、このページで説明した方法のいずれかを使ってフォントをインストールできますが、いくつかの変更が必要です。ローカルのフォントに対して@font-face文を追加するか、フォントをインストールするためにFontsourceのimport戦略を使えます。

Tailwindにフォントを登録する流れは以下の通りです。

1. 上のガイドのいずれかに従ってください。ただし、CSSにfont-familyを追加する最後のステップはスキップしてください。

2. tailwind.config.mjsに書体名を追加します。

   この例では、Interをサンセリフのフォントスタックに追加し、またTailwind CSSのデフォルトのフォールバックフォントも使用しています。

   import defaultTheme from 'tailwindcss/defaultTheme'
   
   /** @type {import('tailwindcss').Config} */
   export default {
   	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   	theme: {
   		extend: {
   			fontFamily: {
   				sans: ['Inter', ...defaultTheme.fontFamily.sans],
   			},
   		},
   	},
   	plugins: [],
   }

   これで、プロジェクト内のすべてのサンセリフテキスト（Tailwindのデフォルト）は選択したフォントを使用し、font-sansクラスはInterフォントを適用するようになりました。

詳細は、カスタムフォントファミリーの追加に関するTailwindのドキュメントを参照してください。

その他のリソース

• MDNのウェブフォントガイドでウェブフォントの仕組みを学びましょう。
• Font Squirrelのウェブフォントジェネレーターでフォント用のCSSを生成できます。