すばやく簡単にフォントを Web サイトに追加できます。

Typekit サブスクリプションをまだお持ちでない場合は、いずれかのプランに新規登録してください。

アカウントを作成したら、早速フォントを選んでみましょう

デフォルトのコレクションと日本語フォントのコレクションをページ上部のセレクターから切り替えることができます。

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

分類(セリフ、サンセリフなど)、プロパティ(小文字の高さ、幅、太さなど)または言語のフィルターを適用して、フォントを絞り込むことができます。また、2 つの推奨カテゴリ(見出しと段落)を選択して絞り込むことも可能です。これらのフォントは Typekit のスタッフが選定したものです。これらのフィルターは任意に組み合わせることが可能です。例えば、見出しに最適な、幅が狭く低コントラストで、かつ英語とスペイン語をサポートするサンセリフフォントを探すことができます。

フォント一覧ページで「サンセリフ」、「見出し」、「英語」、「スペイン語」、「幅が狭い」、「低コントラスト」を選択した状態

日本語フォントのコレクションでは、かなのみのフォントのフィルタリングや、明朝、ゴシック、丸ゴシック、筆書体などのスタイルの分類のフィルタリングを有効にするために、フィルタリングパラメーターがわずかに異なります。また、検索をより絞り込むために、フィルターをいくつでも組み合わせることができます。

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

使用するフォントを探すときは、フォントカードをクリックしてファミリーページに移動します。

使用する Web フォントを選択

フォントファミリーページで「キットに追加」ボタンをクリックし、「新しいキットを作成」を選択します。

フォントファミリーページの「Web での使用 : キットに追加」ボタン。

キットを使用すると、Typekit によって Web サイトに適用されるフォントの設定を行うことができます。キットに名前を付け、Web サイトのドメインを入力します(サブドメインと開発用ドメインを含め、キットごとに最大で 10 個のドメインを追加できます)。

キットを作成:名前を選択して Web サイトドメインのリストを入力

次に、特定のキット用の埋め込みコードが提供されます。埋め込みコードのヘルプページには様々なオプションが説明されており、デフォルトの埋め込みコードは、ほとんどのプロジェクトで適切に機能します。埋め込みコードをコピーして、Web サイトの <head> タグに追加します。

JavaScript 埋め込みコードの使用方法に関する説明

より多くのフォントをキットに追加するには、「キットに追加」ボタンをクリックし、既存のキットに追加メニューからキット名を選択します。

「フォントを使用」をクリックしてキットに別のフォントを追加

キット内のファミリーごとにいくつかの選択をおこなう必要があります。

Web サイトに適した文字セットを選択します。他のフォントには言語ベースのサブセットオプションがあるのに対して、日本語フォントはダイナミックサブセットで提供される必要があります。「選択のヒント」をクリックして説明を参照し、言語サポートとサブセットヘルプページで様々なオプションに関する詳細情報を確認します。

キットエディターの言語サブセットオプション

次に、使用する太さとスタイルを選択します。

キットエディターで使用する太さとスタイルを選択

キットエディターウィンドウの下部にある合計キットサイズに注意してください。フォント数が多すぎると Web ページのロードが遅くなります。

次に、各フォントファミリーに CSS セレクターを追加します。独自のスタイルシートにフォントファミリー名を割り当てることもできます。

キットエディターでの CSS セレクターの追加

最後に、「公開」ボタンをクリックしてキットを公開します。選択したフォントが数分以内にサイトに表示されます。変更を行った後は、必ずキットを再公開してください。

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

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