Adobeフォントライブラリ「Typekit」を使用してみる

デザイナーとしてこだわりたいものといえば「フォント」ですが、有料フォントはどれもお高めですよね。
そこで今回はAdobeが提供するCreative CloudのWebフォントサービス、「Typekit」をご紹介いたします。
Typekitを利用すれば、高品質なフォントライブラリの中から、数多くのフォントを無料で使用できます。

Typekitとは？

Adobe Creative Cloudユーザーが利用できるサービスの一つです。
Webフォントとしてはもちろん、PC上のデスクトップフォントとしても使用可能です。
（Photoshopやllustratorはもちろん、Microsoft OfficeなどAdobe以外のソフトにも対応しています。）

ほとんどのCreative Cloudプランには、Typekitの「ポートフォリオプラン」が含まれていますので、サイト数の制限なしに全てのWebフォントを使用できます。
また、Creative Cloudユーザーではない方も、無料アカウントに登録する事で日本語フォント5種類、欧文フォント218種類をWebフォントとして使用できます。（2018.02月現在）
プランの詳細は、こちらをご覧ください。

Typekitのフォントを追加する

さっそくTypekitのフォントを追加してみましょう。
ブラウザから直接Typekitを開く、もしくはCreative Cloudデスクトップアプリケーションのアセット > フォントから「Typekitからフォントを同期」でTypekitのページに移動します。

※PhotoshopやIllustratorなどのadobeアプリ内でもメニューの書式から「Typekitからフォントを追加」でブラウザが起動します。

ページを開いたら、ライブラリから使用したいフォントを選びましょう。
右側のフィルターから明朝、ゴシックなど、イメージに近いフォントを絞り込めます。

選んだフォントをクリックすると、詳細画面に移動します。
今回選んだフォントは通常とイタリック体の2種類があるので、どちらも同期させるのに「すべてを同期」をクリックします。

下記の完了画面がでたら、ウェブ上での処理は完了です。
ここからフォントの同期が始まります。
※実際に同期されるまでに多少時間がかかります。

追加されたフォントはクラウド上で管理されます。
画面右上に「同期完了」のポップアップ通知が出ればフォント追加は完了です。

追加したフォントを今回はPhotoshopで確認してみます。
文字パネル（メニュー > 文字）よりTLアイコンをクリックすると、今回同期させた「貂明朝」のフォントが追加されていることがわかります。

ちなみにこちらの貂明朝というフォントは、、鳥獣戯画のイメージをもとにデザインされたフォントだそうです。
字形ツール（メニュー > 字形）から見てわかるように、鳥獣戯画に描かれたイタチ科の小動物「貂（てん）」の絵文字が隠されています。

遊び心たっぷりのユーモアなフォントですよね。
こういったフォントがCCユーザーだと無料なのが嬉しいところ。

Webフォントの使い方

次にTypekitのフォントをWebフォントとして使用してみましょう。
フォントを選んだら、詳細画面右上にある、「< > キットに追加」をクリックします。

次の画面で「キット作成ボタン」をクリックするとキット作成画面が表示されます。
名前は任意で、ドメインはWebフォントを利用したいドメインを入力し、「続行」をクリックします。

コードが出力されるので、ここで詳細タブをクリックします。
デフォルトよりこちらの方が「高度な埋め込みコード」と言われており、Webフォント使用に伴うページ読み込みの遅れを回避できます。

こちらのコードをコピーして使用するサイトのhtmlファイルのソース、<head>内にペーストしましょう。
ペーストできたら「続行」をクリックし、キットの管理ページに移動します。

「公開」をクリックして、キットを有効化させます。
有効後、このページの「CSSでフォントを使用」をクリックすると、font-family値での使用方法を確認できます。

今回は試しにTIPS NOTEの記事タイトルを変更してみました。

ちょっとポップな印象になりましたね。

フォントのライセンスについて

デスクトップフォントで作成した画像やロゴデータ（著作権保護＆商標登録もOK）はクライアントに提供可能です。
Tシャツ、ポスター、その他のプリント商品など、市販目的の商品を作成することもできます。

ただし、Webフォントとして利用する際はは少し制約があるようでした。
自社サイトや自身のサイトであればポートフォリオプラン、もしくは無料プランで利用できますが、クライアントのサイトで使用する場合はビジネスプランへのアップグレードが必要になります。
ライセンスについてより詳しくは、TypekitのFAQをご覧ください。