Astroで独自フォントファイルを@font-faceで設定する方法

Astroプロジェクト内で、ダウンロードしたフォントファイルを使用したい場合があるかと思います。今回の記事では、Astroで独自フォントファイルを使用する方法を紹介します。

Astroでフォントファイルを設定する手順

Astroでカスタムフォントを使用する手順は、以下の通りです。

フォントファイルを用意する
フォントファイルをpublicディレクトリに配置する
@font-face文を記述する
CSSでフォントを指定する

1. フォントファイルを用意する

まずは、使用したいフォントファイルを用意しましょう。

フォントの種類が多く、woff2形式でダウンロードできる google-webfonts-helper がおすすめです。

2. フォントファイルをpublicディレクトリに配置する

ダウンロードしたフォントファイルを、Astroプロジェクトのpublicディレクトリに配置します。

ここでは、public/fontsディレクトリを作成し、その中にフォントファイルを格納しています。

3. @font-face文を記述する

@font-face文を使用して、フォントファイルを読み込みます。

CSS

    @font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

Astroでは、publicディレクトリは/で参照できるため、url("/fonts/...")のように記述します。

@font-faceの記述場所

@font-faceの記述は、CSSファイル内でも<style>タグ内でも構いません。

CSSファイル内で記述する場合

CSSファイルに記述し、全体の共通コンポーネントで読み込む場合は、src/styles/global.cssを作成します。（ファイル名は任意）

src/styles/global.css

CSS

    @font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

共通コンポーネント内（一般的にはLayout.astro）のフロントマターでCSSファイルを読み込むと完了です。

src/layouts/Layout.astro

Astro

    ---
import '../styles/global.css';
---

styleタグに記述する場合

<style>タグ内に記述する場合は、コンポーネント内に直接記述します。

サイト全体に適用するには、is:globalディレクティブを付与します。

src/layouts/Layout.astro

Astro

    <style is:global>
  @font-face {
    font-family: "Noto Sans JP";
    src: url("/fonts/noto-sans-jp-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
</style>

特定のコンポーネントのみで使用する場合は、is:globalなしで記述することも可能です。

src/components/Example.astro

Astro

    <style>
  @font-face {
    font-family: "Noto Sans JP";
    src: url("/fonts/noto-sans-jp-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
</style>

4. CSSでフォントを指定する

最後に、フォントを使用したい箇所でCSSを記述します。

src/pages/example.astro

Astro

     
<p>ダミーテキストです。</p>
 
<p class="noto">このテキストには、Noto Sans JPが適用されます。</p>
 
<style>
  .noto {
    font-family: "Noto Sans JP", sans-serif;
  }
</style>

font-familyには、@font-faceで指定したfont-familyを記述します。

これでカスタムフォントの導入と使用方法の解説は終わりです。

【おまけ】@font-faceの書き方

@font-faceの記述方法を簡単にまとめましたので、必要であれば参考にしてください。

同じフォントで複数のweightを指定する場合

同一フォントで異なる太さを指定する場合は、font-familyは同じままで、srcとfont-weightを変更します。

CSS

    @font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
 
@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
 
@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

同じフォントでstyleを指定する場合

同じフォントで異なるfont-styleを指定する場合には、srcとfont-styleを変更します。

CSS

    @font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
 
@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/noto-sans-jp-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

複数のフォーマットを指定する場合

srcは複数指定することが可能です。

例えば、woff2をサポートしているブラウザにはwoff2を適用し、フォールバックとして他のフォーマットを指定することができます。

CSS

    @font-face {
  font-family: "Noto Sans JP";
  src:
    url("/fonts/noto-sans-jp-regular.woff2") format("woff2"),
    url("/fonts/noto-sans-jp-regular.woff") format("woff"),
    url("/fonts/noto-sans-jp-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}