注意:

Typekit の名称が Adobe Fonts に変更されました

従来は、特定のサイトの Web フォントを 1 つにまとめたものをキットと呼んでいましたが、今後は「Web プロジェクト」と呼びます。

フォントは、引き続きアドビが提供する埋め込みコードで Web サイトに追加され(このチュートリアルで説明)、同じフォントライセンスが適用されます。詳しくは、Adobe Fonts の詳細情報を参照してください。

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

使用するフォントの選択

最初に、フォントのライブラリを参照します。デフォルトのコレクションと日本語フォントのコレクションをページ上部のモードセレクターで切り替えることができます。

fonts.adobe.com でのフォントコレクションの切り替え

フォントのリストを絞り込むには、フィルターを使用します。分類(serif、sans serif など)、プロパティ(x-height、幅、太さ)または言語に基づいてフィルターを適用できます。また、2 つの「おすすめ」カテゴリ(本文と見出し)から選択することもできます。これらのフォントは、あらゆるブラウザーとオペレーティングシステムで、特にこれらのサイズの場合にうまく表示されます。

日本語フォントのコレクションには異なるフィルターオプションが用意されていて、かなのみのフォントを探したり、明朝、ゴシック、丸ゴシック、ブラシなどのスタイル分類ごとにフォントを探したりすることもできます。

日本語フォントのライブラリの参照

Web プロジェクトの作成

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

フォントカードからの Web プロジェクトの作成

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

フォントファミリーページからの Web プロジェクトの作成。

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

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

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

プロジェクトの作成:名前を選択してフォントスタイルを選択します。

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

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

Web プロジェクトにコードと CSS を埋め込みます。

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

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

My Adobe Fonts」には、Web プロジェクトとそのプロジェクトに追加されているすべてのフォントが表示されます。「プロジェクトを編集」ボタンをクリックすると、プロジェクトに含めるフォントの太さとスタイルを変更したり、プロジェクトから Web フォントファミリーを完全に削除したりできます。また、文字セットを変更することにより、プロジェクトでサポートする言語を指定することもできます。

My Adobe Fonts ページの Web プロジェクト。

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

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

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

CSS でのフォントの適用

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

Web サイト内の Web フォントに適用する CSS ルール

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー