- Adobe Fonts ユーザガイド
- はじめに
- フォントのライセンス
- フォントの入手と使用
- Creative Cloud アプリケーションでの Adobe Fonts の使用
- フォントの管理
- デスクトップアプリケーションでの見つからないフォントの解決
- InDesign でのフォントの使用
- フォントとタイポグラフィ
- HTML5 Canvas ドキュメントでの web フォントの使用
- InCopy でのフォントの使用
- Adobe Muse でフォントを使用する方法
- Muse での web フォントの使用
- フォントファイルのパッケージング
- トラブルシューティングガイド:フォントの追加
- 追加したフォントがフォントメニューに表示されない
- 「1 つ以上のフォントを追加できません」または「同じ名前のフォントが既にインストールされています」
- 現在使用しているフォントがフォントメーカーによって更新された場合
- Web デザインと開発
- Web サイトへのフォントの追加
- トラブルシューティングガイド:web サイトへのフォントの追加
- HTML 電子メールまたはニュースレターでの web フォントの使用
- Accelerated Mobile Pages(AMP)を使用した web フォントの使用
- CSS セレクター
- font-display settings を使用した web フォントのパフォーマンスのカスタマイズ
- 埋め込みコード
- ダイナミックサブセットと web フォント提供
- フォントイベント
- Web フォントが use.typekit.net から読み込まれるのはなぜですか。
- サイトが use.typekit.net に接続できない
- CodePen での web フォントの使用
- ブラウザーと OS のサポート
- ドメイン
- ローカル開発環境での web フォントの使用
- コンテンツセキュリティポリシー
- Web フォントの印刷
- 言語サポートと OpenType 機能
- フォント技術
Adobe Fonts の web フォントは、web サイト、HTML メールキャンペーン、Google の AMP 形式の記事など、web フォントをサポートする様々なタイプのプロジェクトで使用できます。
使用するフォントの選択
最初に、フォントのライブラリを参照します。必要な言語サポートを「言語と書記体系」ドロップダウンメニューから選択します。
フォントのリストを絞り込むには、タグやフィルターを追加します。自然言語タグを使用して、プロジェクトの雰囲気に合ったフォントを参照するか、分類(serif や sans serif など)、プロパティ(x ハイト、幅、線幅)、または言語でフィルタリングできます。
Web プロジェクトの作成
気に入ったフォントが見つかったら、</> ボタンをクリックしてそのファミリーを web プロジェクトに追加します。
また、フォント名をクリックしてファミリーページを開くと、そのフォントで使用できるすべての太さとスタイルが表示されます。次に、ページ上部の「</> web プロジェクトに追加」をクリックしてそのファミリーを web プロジェクトに追加します。
「Web プロジェクトにフォントを追加」ウィンドウで、web プロジェクトに名前を付け、プロジェクトに含めるフォントを決定します。
- メニューをクリックし、「新しいプロジェクトの作成」を選択します。
- 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 で使用すると、テキストにフォントを適用できます。