マニュアル キャンセル

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

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

Adobe Fonts web サービスでは、提供されている埋め込みコードを通じて web フォントを使用する必要があります。利用条件では、web フォントファイルを自分でホストしたり、web サイトデザインプラットフォームにアップロードしたりすることは許可されていません。

使用するフォントの選択

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

言語設定を強調表示するフォント Web インターフェイスが表示されます
言語と書記体系メニューを選択すると、フォントの言語フィルターのメニューが表示されます

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

Adobe Fonts タグの参照

Web プロジェクトの作成

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

強調表示されている「ファミリーを追加」オプションとともに表示されている Gilbert フォントの画像

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

フォント Web からフォントファミリーを追加し、スタイルとフォントの太さを選択

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

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

プロジェクトの設定は、後からフォントの管理ページで変更することもできます。

フォント Web から新しいプロジェクトに追加するフォントを選択するポップアップの画像

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

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

フォントの埋め込みコードがフォントスタイルとともに表示された画像

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

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

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

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

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

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

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

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

CSS でのフォントの適用

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

wp-page

ヘルプをすばやく簡単に入手

新規ユーザーの場合