Web上で好きなフォントを簡単に表示できるTypekitの使い方

Web上でさまざまなフォントを表示することができるWebフォントは、今ではかなり一般的になりつつあり、さまざまなホームページがWebフォントを活用しています。
Webフォントには欧米文字だけでなく、日本語フォントも設定次第で表示することができるので、タイトルなどの画像スライスを作成する必要がなく、デザインの幅が大きく広がります。

Webフォントを選ぶサービスとして最もよく知られているのはGoogle Fontsですが、Google Fontsには日本語フォントが充実しておらず、日本語サイトをデザインするデザイナーにとってはあまり使い勝手がよいとは言えないでしょう。
しかし、PhotoshopやIllustratorなどの開発・販売をしているAdobeでは、Typekitと呼ばれるWebフォントサービスを展開しており、日本語フォントも充実しています。
さらに特筆すべきことは、このTypekitはCreative Cloudの有料会員はもちろん、無料でも十分に活用することができるという点です。

そこで本稿では、無料から始められる、Web上で好きなフォントを簡単に表示できるTypekitの使い方を初心者向けに解説していきます。

Typekitを使ってみよう

スクリーンショット：2017年9月

デザインを行う上で必要不可欠なのが、フォントを使って文字を装飾することですが、もっと自由にフォントを使えたらますます便利になると思いませんか？
Adobeが提供しているWebフォントサービスTypekitは、そんな思いに応えるWebサービスです。

このサービスを使えば、サーバーにフォントをアップロードしたり、ユーザーにわざわざフォントをダウンロードしてもらわなくても、Webブラウザ上ですぐにデザインフォントを表示することができます。

ここでは、Typekitの使い方を3ステップに分けて確認していきましょう。

1. Adobe IDを登録

Typekitには、Adobe IDへの登録が必要です。
こちらのページに移動し、新規でAdobe IDを発行するか、すでにお持ちのAdobe IDでログインを行なってください。

2. 使いたいフォントを選ぶ

スクリーンショット：2017年9月

サインアップ(もしくはログイン)後、フォントを選ぶページが表示されます。
右側のフィルターで絞り込みを行ったり、上のトグルで日本語フォントだけを選ぶことができます。

スクリーンショット：2017年9月

無料プランでは、日本語フォントは「源ノ角ゴシック」「源ノ明朝」「平成角ゴシック Std」「平成丸ゴシック Std」「平成明朝 Std」の5つを選択することができます。
ここでは「平成丸ゴシック Std」をホームページに反映させてみましょう。

スクリーンショット：2017年9月

使えるフォントが緑色のボタンで表示されるので、Webサイトで表示したい場合は「キットに追加」ボタンをクリックします。

3. キットを作成して埋め込みコードを追加

スクリーンショット：2017年9月

最初はまだキットを作成していないので、このような画面が現れます。

スクリーンショット：2017年9月

「キットを作成」をクリックして、サイト情報を入力します。

すると、このような埋め込みコードが作成されるので、このコードをコピーして、ホームページのHEADタグ内、もしくはBODYの閉じタグの直前に挿入します。
(SEO的にはBODYの閉じタグの直前のほうがいいと言われています)

スクリーンショット：2017年9月

続行をクリックするとキットの管理ページに移動します。

スクリーンショット：2017年9月

「公開」を押して、キットを有効化します。

有効化したあと、このページの「CSSでフォントを使用」をクリックすると、CSS挿入用のタグが表示されます。

スクリーンショット：2017年9月

こちらのコードを任意の場所に挿入してください。

すると、下記のような角ゴシック調のブログ記事が、

スクリーンショット：2017年9月

丸ゴシックで表示されるようになりました。

スクリーンショット：2017年9月