今回は、最近気になっていました
【Adobe Edge Tools】のTypekitを使ってみたので、そのレビューをさせていただきます。
”Adobe Edgeツール&サービスとは「HTML／CSS／JavaScriptを使って、美しくかつモバイルに対応したコンテンツやアプリを制作したい」と考えるWebデザイナーやデベロッパーに向けた一連のツールやサービスです。 ”
とのこと。。。これは使うしかない。。
Webフォントがどんどん利用しやすくなっている昨今。。。
Adobe Creative Cloudの無償メンバーシップでも利用することができる
Adobe Type Kit!!!
それでは、使ってみましょう。
まずは、adobe IDをとりましょう！
※無償メンバーシップでも限定的ですが、Webフォントを利用できます。
https://creative.adobe.com/
IDでログインしたら、【アプリケーション】一覧から【Adobe Type Kit】の【フォントを表示】をクリック
TypeKitのサイトに飛びます。
【Strat browsing fonts】をクリックすることで、使いはじめることができます。
Adobe Type Kitのダッシュボードがこちら！！
もう、なんかいろいろ便利すぎて全部は説明できません！！
※基本英語表記ですが、触ってもらえれば直感的にわかると思います。
使いやすかったポイントは、、、この右パネル！！
上から簡単に説明します
・Classification
フォント の形の分類です。Sans serif , Serif, Scriptなど分類されてます。
・Recommended For
これは、本文（Paragraph）に使うのか、タイトル（Headline）に使うのか？
の選択です。
フォントは、本文用、見出し用があり、本文用は文字が小さく
なっても読みやすく設計されているなど、用途に合わせた設計がされています。
本文で使うのか、見出しで使うのかは重要な選択肢になります。
・Properties
フォントのweight（太さ）やWidth（文字の幅）など、要素を絞り込むことができます。
・Languege Support
各言語に対応しているかの選択項目です。
これはあんまり使用しないかも。。。
この右パネル、絞り込み検索になっていて、下記のように
簡単に目的に合ったフォントを検索することができます。
サンセリフ体で、ヘッドラインに使いたくて、標準のウエイトのフォントが瞬時にリスト表示されます。
また、便利な機能として、各OSごとのブラウザでの表示検証ができる点がいい！！
※ちなみに、各フォントの左上に鍵のマークがるフォントは有償会員にアップグレードすることで使用可能になります。
無償メンバーシップですと、登録できるサイトが１サイト/２フォントの縛りなのでかなり限定的です。
ちなみにAdobeはEdge Web Fontsという無償サービスも提供していて、こちらはEdge Codeに統合されていますので、Edge Codeの紹介時に詳しく説明させていただきます。
さて、フォントが決まりましたらあとは簡単！
フォントを選択し、【Create a Kit】をクリック
上記項目に入力します。
次に上記のタグが発行されますので、コピーしてサイトの<head></head>内に貼り付けます。
【Continue】を押すと、
上記画面になりますので、左上にWebフォントを適用するセレクターを設定し、追加します。
例として、h1タグを追加しました。
これであとは、cssの設定、テキストのマークアップをすることでWebフォントが適用されます。
めっちゃ簡単！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="//use.typekit.net/wjd5aqv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div align="center">
<h1>Aratana Design Walker</h1>
</div>
</body></html>①<head></head>内に、先ほど発行されたタグを貼り付けて
②Webフォントを適用したいテキストをマークアップ
③cssで調整
以上で完了です！
Type Kit非常に使いやすいです。あの絞り込みパネル。。。いいですね！無料で使えるフォントも200種類以上あるので、ぜひ使ってみてください。