カスタムフォントの使用
Astroは、サイトデザインにカスタム書体を追加するための一般的な戦略をすべてサポートしています。このガイドでは、プロジェクトにWebフォントを含めるための2つの異なるオプションを紹介します。
ローカルのフォントファイルを使う
Section titled ローカルのフォントファイルを使うフォントファイルをプロジェクトに追加したい場合は、public/
directoryに追加することをお勧めします。CSSでは@font-face
ステートメントでフォントを登録し、font-family
プロパティを使ってサイトのスタイルを設定できます。
DistantGalaxy.woff
というフォントファイルがあると想像してみましょう。
-
public/fonts/
にフォントファイルを追加します。 -
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; }
-
コンポーネントやレイアウト要素にスタイルを設定するには、
@font-face
ステートメントで指定したfont-family
を使用します。この例では、見出しの<h1>
にはカスタムフォントが適用され、段落の<p>
には適用されません。src/ pages/ example.astro --- --- <h1>はるかかなたの銀河系で…</h1> <p>カスタムフォントを使うと、見出しがよりカッコよくなりますね!</p> <style> h1 { font-family: 'DistantGalaxy', sans-serif; } </style>
Fontsourceを使う
Section titled Fontsourceを使うFontsourceプロジェクトを使うと、簡単にGoogle Fontsやその他のオープンソースのフォントを使用できます。使用したいフォントをnpmモジュールとしてインストールできます。
-
Fontsource’s catalogで使用したいフォントを探します。例として、ここではTwinkle Starを使用します。
-
選択したフォントのパッケージをインストールしてください。
Terminal window npm i @fontsource/twinkle-star
Terminal window pnpm i @fontsource/twinkle-star
Terminal window yarn add @fontsource/twinkle-star
-
フォントを使用したいレイアウトまたはコンポーネントで、フォントパッケージをインポートします。通常は、サイト全体でフォントを利用するために、共通のレイアウトコンポーネントでこれを行います。
インポートすると、フォントを設定するのに必要な
@font-face
ルールが自動的に追加されます。src/ layouts/ BaseLayout.astro --- import '@fontsource/twinkle-star'; ---
-
そのフォントのFontsourceページの内容にしたがって、
font-family
を使用します。これは、AstroプロジェクトでCSSを書けるところならどこでも使えます。h1 { font-family: "Twinkle Star", cursive; }
その他のリソース
Section titled その他のリソースTailwindでフォントを追加する
Section titled Tailwindでフォントを追加するTailwindインテグレーション (EN)を使用している場合は、フォントを登録する際に、ローカルのフォントに対して@font-face
ステートメントを追加するか、Fontsourceのimport
戦略を使えます。その後、カスタムフォントファミリーの追加についてのTailwindのドキュメントに従ってください。
Webフォントの仕組みを学ぶ
Section titled Webフォントの仕組みを学ぶMDNのWebフォントガイドで紹介されています。
フォント用のCSSを生成する
Section titled フォント用のCSSを生成するFont SquirrelのWebフォントジェネレータ―は、フォントファイルを準備するのに便利です。