Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。作成者が自身のフォントを提供できるようになるため、@font-face はユーザのコンピュータにインストールしているフォントの数に依存する必要性を排除します。mozilla developer center @font-face – MDC

という事になります。従来ならデザインされたフォントを使った見出しなどは画像で作っていたのですが、これによってテキストで表現出来るようになります。

しかし新しいブラウザでしか表示できなかったり、フォントの権利問題などによりなかなか使用しにくいものでした。

今回試したtypekitは権利周りがクリアなフォントを簡単に@font-faceとして使用できるというサービスです。

プランは無料のものから用意されており、気軽に使用出来るようになっています。(無料版はサイト右下にtypekitのバナーが出現)

ちなみに無料のTrialだと69種類(現在)の欧文フォントの中から２種類のフォントが利用できます。日本語のブログだと欧文フォントは２種類で十分な場合も多いのではないでしょうか。(残念ながら日本語フォントはありません)

設定も簡単で、typekit側が用意したJavaScriptのコード２行をheadに書き込んで、後はtypekit editerから反映させたいセレクタを指定するだけ。今回はブログタイトル(h1)とサイドバーの見出し(h3)に指定してみました。本当に10分くらいで作業が終了。

使用前

使用後

たった数分でこんなにも見出しの印象が変わりました。しばらくこのまま使ってみようと思います。

参考
typekit
TypeKit で広がる Web デザインの可能性 | WWW WATCH
詳しく解説してくれています。

“ツール”にwebサービスを追加すると何が良いかというと、いちいちお気に入りから利用したいwebサービスのサイトを開いて…という手間を省く事ができるのです。たぶん僕は死ぬまであと何回もこれを繰り返す事になるんで(まぁ明日生きてるかもわからないんだけど)、1秒でも早いとうれしいよね！ライフハックとかと同じノリだよ！

ではwdの”ツール”を開いて、”ツールを編集する”クリック。ウィンドウが開いたら、”追加”を押します。ツールタイプはURLを選択して、URL:の中に下にある利用したいサービスの http://～～= までを入れます。以上！

アクセシビリティチェック(HAREL)

http://harel.nttdata.co.jp/check?uri=

NTTデータが提供するサービス。採点形式でチェックしてくれます。

点数低っ！次作り直す時は頑張ります。

SEOアクセス解析(SEO TOOLS)

http://www.seotools.jp/001_seoanalyze/?url=

webサイトをSEO的観点から採点しくれるサービス。

ちなみにうちは26点でした。いやーお恥ずかしい。

SEO検索エンジン (Pythagoras)

http://www.pythagoras.bz/index.php/default/detail?url=

webサイトのキーワードや全体的なデータが見れるサービス。

見にくいですけど、このブログがまだwordpressのデフォルトのテーマ(classic)を使ってた頃の画像になってますね。

web戦闘力(影響力)測定(Web Scouter)

http://ja.webscouter.net/info.phtml?u=

外部要因からサイトの戦闘力を算出するサービス。(ブックマークから簡単に計れますけどね)

このブログは89。良く言えば一番最初に天下一武道会に出た悟空と同じくらいらしい。

FC2キーワードチェッカー

http://seo.fc2.com/keywordrate/index.php?m=ct&optid=&url=

FC2のキーワード専門のチェッカー。最適は5％的なアレですね。

とくにこだわった事がないので何も言えないです。

他に何かオススメがありましたらぜひ教えてください。