tande lab.

Adobe Typekit を使ってみた

毎月Adobeにお布施する覚悟ができたので、Adobe Creatibe Cloud に登録してみました。
さて、せっかく登録したのだから、今まで使ったことないアプリやサービスも使いこなさないと損!!

ということで、第一弾めは Adobe Typekit を触ってみました。

My image

Adobe Typekit とは

Adobe Typekit とは、Adobe が提供する Webフォントサービス です。
コードを数行追加するだけで、閲覧者のブラウザやPC環境に左右されずWebサイトで指定したフォントを表示できます。

フォントを利用したいドメインを登録すると専用のコードがパブリッシュされるので
それをサイトに埋め込むことで、Typekit のフォントが利用できるようになります。

現在、使えるフォントは欧文フォントのみで日本語は未対応ですが
きっとそのうち日本語も対応すると思うとワクワクしますね。

欧文フォントだけでも有名どころのフォントがズラリと揃ってます。
かなりデザインの幅が拡がるんじゃないでしょうか。

私はWeb屋じゃないので仕事で使う事はあまりなさそうですが、
趣味でつくるあんなサイトやこんなサイトにも好きなフォントが使えちゃう!
と思うと嬉しすぎます。

初期設定

まずは Adobe ID でログイン。
https://lh6.googleusercontent.com/-N6yOO776GKs/T8pECAnvXRI/AAAAAAABDQc/DhpX7A0JfYw/s400/120602-0018.png

ログインすると、ようこそ!とお出迎えされるので、
右下の "Get Started" をぽちっと押して次へ進めます。
https://lh3.googleusercontent.com/-qy1aGq2O6d4/T8pEC8W9R1I/AAAAAAABDQg/J510ltvP3oA/s400/120602-0020.png

Webフォントを使うために "Kit" をつくります。
Kit は利用するドメインごとに必要です。
https://lh6.googleusercontent.com/-pCabZ3z86GA/T8pEDvoZuaI/AAAAAAABDQo/DvQPAONLv2I/s400/120602-0021.png

Name 任意名称を入力(サイト名とか)
Domains Webフォントを利用するサイトドメインを入力(例: *.tande.jp)

"Enable colophon badge" にチェックをつけると、サイト上に Typekit のバッヂがついてしまうので、外した方が良いと思います。

サイトのヘッダーに貼付けるコードがパブリッシュされます。
コピーしてサイトの head タグ内に貼付けます。
https://lh4.googleusercontent.com/-rvtvCZeBQDk/T8pEEZg4g9I/AAAAAAABDQ0/8x8r4dMt8eY/s400/120602-0022.png

これで準備は完了!
https://lh6.googleusercontent.com/-WR1PcXpJB0Y/T8pEFECDwOI/AAAAAAABDQ4/G68Z_Js5ovo/s400/120602-0023.png

フォントを指定する

フォントがズラリ。
Adobeにお布施したら、この中からいくつでも使えます!嬉しい!
フォントのテイストを指定して絞り込み検索もできます。
https://lh4.googleusercontent.com/-MYFhXMYOhPk/T8pRfXxsflI/AAAAAAABDSg/7uNRaZ68ODY/s400/120603-0009-2.png

フォントをマウスオーバーしたらでてくる "Add to Kit" をクリックして、使いたいフォントを Kit に追加します。
https://lh3.googleusercontent.com/-EZlEIkLzxS0/T8pOg5wFVjI/AAAAAAABDRw/4dwFWORenQ4/s400/120603-0007.png

フォントを追加したら画面右上の "Launch Kit Editer" をクリックすると、
https://lh5.googleusercontent.com/-xcBK0jOJ6lw/T8pPhjskdvI/AAAAAAABDSA/avprS5rP5bg/s400/120603-0008.png

別画面で Editer が開きます。
ここでフォントを、どのCSSセレクタ内で使うのかなどの設定をします。
https://lh3.googleusercontent.com/-gJ7v3xz9368/T8pSpKskiiI/AAAAAAABDSs/M8J0ia7l3lI/s400/120603-0010.png

たとえば、HTML の body 内でフォントを使いたい場合、"body" を Selectors に登録します。
https://lh6.googleusercontent.com/-Mu3eiBBposE/T8pTPtyxRbI/AAAAAAABDS0/emPNN2lSocw/s400/120603-0011.png
デフォルトで用意されているセレクタ ".tk-***" を利用して CSS をカスタマイズしてもOKです。
"Using fonts in CSS" のリンクからも、CSS記述例が覗けます。

CSSの記述方法は、例えばこんな感じ。

body {
  font-family: "facitweb",sans-serif;
}

Selectors に登録してないセレクタ内では反映されませんので注意。

変更を加えた後は、左下の "Publish" を押してサイトに反映させます。
https://lh6.googleusercontent.com/-Zb42FMfSpIc/T8pUg-2MDqI/AAAAAAABDS8/3E8Md00Ldec/s400/120603-0013.png

以上で、一連の流れは終わり。
無事、Webフォントをサイトに適用できました。

サイトに反映されるまで若干のタイムラグがあるようですが、比較的すぐに反映されます。
てことで、このサイトも欧文文字だけ "facitweb" というフォントにしてみました(^-^)