Adobe Typekitの使い方

Creative Cloudコンプリートプランを使用していると、Adobe Typekitのポートフォリオプランを使用できます。無制限のWebサイトおよび任意のアプリケーションで使用できます。

以下はポートフォリオプランのまとめです。その他のプランについてはTypekitの料金ページで確認してください。

  • 同期対象1000個以上のフォント選択可能
  • 同時に100個のフォントを同期可能
  • web用フォントは4200個以上のフォント選択可能
  • 500,000ページビュー/月
  • Webサイトの数、無制限

手順

Adobe Typekitにログインします。

フォント一覧から使用したいフォントを選び、同期フォントかWebで使うのかを選択します。

20151021_img

同期の場合はCCがインストールされていれば、即時使うことができます。Webで使用する場合は”キット”を作成する必要があります。キット作成には任意のキット名と対象ドメインが必要になります。

実装方法

キッド毎に発行されるJavaScriptのコードをタグの直前に埋め込みます。

20151021_img03

セレクターを自分で追加できます。デフォルトのセレクタは長いのでオリジナルで作ったほうが使いやすいかもしれません。

<p class="font_b">Adobe Typekit</p>
<p class="font_a">アドビタイプキット</p>
<p class="font_c">簡単に使えます</p>

cssでfont-family属性を使用して使用して設定することもできます。「CSSでフォントを使用」でコードを確認できます。

p {
  font-family: "a-otf-midashi-go-mb31-pr6n";
  }

サンプル

Adobe Typekit

アドビタイプキット

簡単に使えます