コンテンツにスキップ

カスタムフォントを使用する

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

ローカルフォントファイルを使用する

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

フォントファイルをpublic/fonts/に追加します.
以下の@font-face宣言を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;
}
```
@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モジュールをインストールできます。

使用したいフォントをFontsourceのカタログで探します。この例ではTwinkle Starを使用します。
使用するフォントのパッケージをインストールします。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
npm install @fontsource/twinkle-star
ターミナルウィンドウ
pnpm add @fontsource/twinkle-star
ターミナルウィンドウ
yarn add @fontsource/twinkle-star
正しいパッケージ名は、Fontsourceウェブサイトの各フォントページにある「Quick Installation」セクションで確認できます。パッケージ名は@fontsource/または@fontsource-variable/で始まり、その後にフォント名が続きます。
フォントを使用したいコンポーネント内でフォントパッケージをインポートします。通常は、サイト全体でフォントを利用できるようにするため、共通のレイアウトコンポーネントでインポートするとよいでしょう。

フォントパッケージをインポートすると、フォントの設定に必要な@font-faceルールが自動的に追加されます。
src/layouts/BaseLayout.astro
```
---
import '@fontsource/twinkle-star';
---
```
Fontsourceページのbodyの例に示されているフォント名をfont-familyの値として使用します。AstroプロジェクトでCSSを記述できる場所ならどこでも使えます。
```
h1 {
  font-family: "Twinkle Star", cursive;
}
```

ウェブサイトのレンダリング時間を最適化するには、初期ページ表示に必要なフォントを事前レンダリングするとよいでしょう。詳細と使用方法については、Fontsourceのフォントプリロードガイドを参照してください。

Tailwindにフォントを登録する

Tailwind (EN)を使用している場合でも、多少の変更を加えれば、このページで紹介した方法のいずれかを使ってフォントをインストールできます。ローカルフォント用に@font-face宣言を追加する、またはFontsourceのimport方式を使ってフォントをインストールできます。

Tailwindにフォントを登録するには:

上記のいずれかのガイドに従ってください。ただし、CSSにfont-familyを追加する最後のステップはスキップしてください。
src/styles/global.cssにフォント名を追加します。

この例では、Interをsans-serifのフォントスタックに追加しています。
src/styles/global.css
```
@import 'tailwindcss';

@theme {
  --font-sans: 'Inter', 'sans-serif';
}
```
これで、プロジェクト内のすべてのsans-serifテキスト(Tailwindのデフォルト)に選択したフォントが使用されるようになり、font-sansクラスでもInterフォントが適用されます。

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

その他のリソース

MDNのWebフォントガイドでWebフォントの仕組みを学ぶ。
Font SquirrelのWebfontGeneratorでフォント用のCSSを生成する.

貢献するコミュニティスポンサー