カスタムフォントの使用

Astroは、サイトデザインにカスタム書体を追加するための一般的な戦略をすべてサポートしています。このガイドでは、プロジェクトにWebフォントを含めるための2つの異なるオプションを紹介します。

フォントファイルをプロジェクトに追加したい場合は、public/ directoryに追加することをお勧めします。CSSでは@font-faceステートメントでフォントを登録し、font-familyプロパティを使ってサイトのスタイルを設定できます。

DistantGalaxy.woffというフォントファイルがあると想像してみましょう。

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

2. CSSに@font-faceステートメントを追加します。これは、インポートするグローバルな.cssファイルでも、このフォントを使用したいレイアウトやコンポーネントの<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>には適用されません。

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

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

1. Fontsource’s catalogで使用したいフォントを探します。例として、ここではTwinkle Starを使用します。

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

   npmpnpmYarn

   npm i @fontsource/twinkle-star

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

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

   ---
   import '@fontsource/twinkle-star';
   ---

4. そのフォントのFontsourceページの内容にしたがって、font-familyを使用します。これは、AstroプロジェクトでCSSを書けるところならどこでも使えます。

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

Tailwindインテグレーション (EN)を使用している場合は、フォントを登録する際に、ローカルのフォントに対して@font-faceステートメントを追加するか、Fontsourceのimport戦略を使えます。その後、カスタムフォントファミリーの追加についてのTailwindのドキュメントに従ってください。

MDNのWebフォントガイドで紹介されています。

Font SquirrelのWebフォントジェネレータ―は、フォントファイルを準備するのに便利です。