コンテンツにスキップ
Astro 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. 選択したフォントのパッケージをインストールしてください。

    Terminal window
    npm install @fontsource/twinkle-star

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

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

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

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

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

    tailwind.config.cjs
    const defaultTheme = require("tailwindcss/defaultTheme");
    

    module.exports = {
      // ...
      theme: {
        extend: {
          fontFamily: {
            sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
          },
        },
      },
      // ...
    };

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

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

その他のリソース