Web サイトへのフォントの追加

Adobe Fonts の Web フォントは、Web サイト、HTML メールキャンペーン、Google の AMP 形式の記事など、Web フォントをサポートする様々なタイプのプロジェクトで使用できます。

使用するフォントの選択

最初に、フォントのライブラリを参照します。必要な言語サポートを「言語と書記体系」ドロップダウンメニューから選択します。

フォントのリストを絞り込むには、タグやフィルターを追加します。自然言語タグを使用して、プロジェクトの雰囲気に合ったフォントを参照するか、分類（serif や sans serif など）、プロパティ（x ハイト、幅、線幅）、または言語でフィルタリングできます。

Web プロジェクトの作成

気に入ったフォントが見つかったら、</> ボタンをクリックしてそのファミリーを Web プロジェクトに追加します。

また、フォント名をクリックしてファミリーページを開くと、そのフォントで使用できるすべての太さとスタイルが表示されます。次に、ページ上部の</>「Web プロジェクトに追加」をクリックしてそのファミリーを Web プロジェクトに追加します。

「Web プロジェクトにフォントを追加」ウィンドウで、Web プロジェクトに名前を付け、プロジェクトに含めるフォントを決定します。

メニューをクリックし、「新しいプロジェクトの作成」を選択します。
Web プロジェクトに名前を付けます。
チェックボックスを使用してプロジェクトに含めるフォントの太さとスタイルを選択します。
プロジェクトを作成します。

プロジェクトの設定は、後から「My Adobe Fonts」ページで変更することもできます。

次に、フォントを Web サイトに読み込むための埋め込みコードが表示されます。埋め込みコードのヘルプページでは様々なオプションについて説明されていますが、デフォルトの埋め込みコードは、ほとんどのプロジェクトで適切に機能します。

埋め込みコードをコピーして、Web サイトの <head> タグに追加します。

「終了」をクリックして Web プロジェクトウィンドウを閉じると、フォントの閲覧を続けることができます。さらに他のフォントをプロジェクトに追加するには、他のフォントファミリーの </> ボタンをクリックし、（「新しいプロジェクトを作成」を選択する代わりに）メニューからプロジェクト名を選択します。

Web プロジェクトのカスタマイズ

「My Adobe Fonts」には、Web プロジェクトとそのプロジェクトに追加されているすべてのフォントが表示されます。

「プロジェクトを編集」ボタンをクリックして、含めるフォントの太さとスタイルの変更、プロジェクトからの Web フォントファミリーの削除、font-display 設定の指定を行います。また、Web プロジェクトエディターで、プロジェクトの言語サポートを指定する文字セットを変更することもできます。

東アジアのフォントを提供する場合は、ダイナミックサブセットを指定する必要があります。その他のフォントには、言語ごとのサブセットオプション（「デフォルト」、「すべての文字」またはカスタム言語サブセット）があります。これらのオプションについて詳しくは、言語サポートとサブセットヘルプページを参照してください。

「OpenType 機能」ボックスをオンにすることで、任意の OpenType 機能をプロジェクトに含めることもできます。このボックスをオンにすると、その Web フォントファミリーで使用できる機能のリスト（合字、代替文字、スモールキャップスなど）が表示されます。

Font Display を使用すると、Web フォントを Web ブラウザーに読み込んで Web サイトに適用する方法を指定できます。これらのオプションについて詳しくは、font-display settings のヘルプページを参照してください。

プロジェクトの設定が完了したら、「変更を保存」をクリックしてプロジェクトを保存します。更新の結果は、数分以内に Web サイトに反映されます。

CSS でのフォントの適用

Web プロジェクトページには、プロジェクト内の各フォントの CSS font-family 名に加え、各フォントの太さとフォントスタイルを示す数値が表示されます。これらの font-family 名を CSS で使用すると、テキストにフォントを適用できます。

その他の関連ヘルプ

Web フォントが use.typekit.net から読み込まれるのはなぜですか。