カスタムフォントの使用

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

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

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

フォントファイルをプロジェクトに追加したい場合は、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>には適用されません。

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

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

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

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

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

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

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

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

Tailwindでフォントを追加する

Section titled Tailwindでフォントを追加する

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

Webフォントの仕組みを学ぶ

Section titled Webフォントの仕組みを学ぶ

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

フォント用のCSSを生成する

Section titled フォント用のCSSを生成する

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