マニュアル キャンセル

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

  1. Adobe Fonts ユーザガイド
  2. はじめに
    1. システムおよびサブスクリプション要件
    2. ブラウザーと OS のサポート
    3. コンピューターへのフォントの追加
    4. Web サイトへのフォントの追加
    5. CC Mobile でのフォントの追加
  3. フォントのライセンス
    1. フォントのライセンス
    2. アカウントの管理
    3. Creative Cloud エンタープライズ版のお客様へのライセンス供与について
    4. アカウントへのフォントライセンスの追加
    5. サブスクリプションライブラリからのフォントの削除
    6. 中国で登録された Adobe ID は Adobe Fonts の利用対象外
    7. Creative Cloud サブスクリプションにこれらのフォントが含まれていない理由
    8. 2021 年 9 月に Morisawa フォントを一部提供を停止
  4. フォントの入手と使用
    1. Creative Cloud アプリケーションでの Adobe Fonts の使用
    2. フォントの管理
    3. デスクトップアプリケーションでの見つからないフォントの解決
    4. InDesign でのフォントの使用
    5. フォントとタイポグラフィ
    6. HTML5 Canvas ドキュメントでの web フォントの使用
    7. InCopy でのフォントの使用
    8. Adobe Muse でフォントを使用する方法
    9. Muse での web フォントの使用
    10. フォントファイルのパッケージング
    11. トラブルシューティングガイド:フォントの追加
    12. 追加したフォントがフォントメニューに表示されない
    13. 「1 つ以上のフォントを追加できません」または「同じ名前のフォントが既にインストールされています」
    14. 現在使用しているフォントがフォントメーカーによって更新された場合
  5. Web デザインと開発
    1. Web サイトへのフォントの追加
    2. トラブルシューティングガイド:web サイトへのフォントの追加
    3. HTML 電子メールまたはニュースレターでの web フォントの使用
    4. Accelerated Mobile Pages(AMP)を使用した web フォントの使用
    5. CSS セレクター
    6. font-display settings を使用した web フォントのパフォーマンスのカスタマイズ
    7. 埋め込みコード
    8. ダイナミックサブセットと web フォント提供
    9. フォントイベント
    10. Web フォントが use.typekit.net から読み込まれるのはなぜですか。
    11. サイトが use.typekit.net に接続できない
    12. CodePen での web フォントの使用
    13. ブラウザーと OS のサポート
    14. ドメイン
    15. ローカル開発環境での web フォントの使用
    16. コンテンツセキュリティポリシー
    17. Web フォントの印刷
  6. 言語サポートと OpenType 機能
    1. 言語サポートとサブセット
    2. OpenType 機能の使用
    3. CSS での OpenType 機能の構文
  7. フォント技術
    1. OpenType-SVG カラーフォント
    2. 貂明朝:バージョン 1.000 からのアップデートに関する要点

Adobe Fonts の web フォントは、web サイト、HTML メールキャンペーンGoogle の AMP 形式の記事など、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

 Adobe

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

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX

The Creativity Conference

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX

The Creativity Conference

10 月 14 日~ 16 日 マイアミビーチおよびオンライン