CSS Academy · レッスン

Google Fontsと@font-face

Q: 「Google Fontsと@font-face」で何を学びますか？

Google Fontsから外部フォントを読み込むか、@font-faceルールでカスタムフォントを定義します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Google Fontsから外部フォントを読み込むか、@font-faceルールでカスタムフォントを定義します。

「Google Fontsと@font-face」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

カスタムフォントを使う理由

Webセーフフォントで選べる種類はごくわずかです。カスタムフォントを使えば、ブランドのアイデンティティに正確に合わせられます。主な方法は、Google Fonts（ホスティングサービス）と@font-face（自分でホストする方法）の2つです。

Google Fontsの設定

fonts.google.comにアクセスし、フォントファミリーを選択してウェイトを指定し、<link>タグをHTMLの<head>にコピーします。

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

CSSでGoogle Fontsを使用する

リンクを追加したら、font-familyのフォントスタックでフォント名を指定します。

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Google Fonts APIのパラメーター

display=swapパラメーターは、Font Display Swap戦略を使用します。最初はフォールバックフォントですぐにテキストを表示し、カスタムフォントの読み込みが完了すると切り替えます。読み込み中にテキストが見えなくなるのを防げます。

@font-faceの基本

@font-faceを使うと、自分でホストするカスタムフォントファイルを読み込めます。フォントファミリー名とファイルのソースを定義します。

<p class="brand-text">Custom brand typeface text</p>

WOFF2：最新のフォーマット

WOFF2（Web Open Font Format 2）は推奨されるフォーマットです。最も高い圧縮率（通常、WOFFより30%小さい）を実現し、最新のすべてのブラウザーでサポートされています。フォールバックとして必ずWOFFも含めてください。

@font-faceで複数のウェイトを指定する

ウェイトとスタイルの組み合わせごとに@font-faceブロックを1つ宣言します。同じfont-family名を使用すると、ブラウザーが適切なファイルを自動的に選択します。

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

font-displayプロパティ

font-display記述子は、フォントの読み込み動作を制御します。

swap — すぐにフォールバックを表示し、準備ができたら切り替える（推奨）
block — 最大3秒間、テキストを非表示にする
fallback — 短時間ブロックした後、永続的にフォールバックを使用する
optional — すでにキャッシュされている場合のみ使用する

<p class="swap-text">Text swaps in once Inter loads.</p>

可変フォントの@font-face

可変フォントでは、固定されたウェイト値の代わりに軸の範囲を定義します。

<p class="variable-text">Variable weight text (550)</p>

重要なフォントのプリロード

最も重要なフォントファイルをプリロードして、描画をブロックする遅延を減らします。スタイルシートより前に<link rel="preload">を追加します。

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local()でダウンロードを省略する

src内でlocal()を使用すると、ダウンロードする前にユーザーがすでにフォントをインストールしているか確認できます。

<p class="roboto-text">Uses local Roboto if installed</p>

確認問題

最も高い圧縮率と、最新のブラウザーで最も広いサポートを提供するフォントフォーマットはどれですか？

まとめ

Google Fontsでは、<link>タグを使ってホスティングされたフォントを簡単に利用できます。最高のパフォーマンスを得るには、WOFF2フォーマットとfont-display: swapを使って、@font-faceでフォントを自分でホストします。重要なフォントをプリロードし、local()を使って不要なダウンロードを避けます。

よくある質問

「Google Fontsと@font-face」レッスンは無料ですか？

はい。「Google Fontsと@font-face」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「Google Fontsと@font-face」で何を学びますか？

Google Fontsから外部フォントを読み込むか、@font-faceルールでカスタムフォントを定義します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Google Fontsと@font-face」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← CSS Academyに戻る