webフォント使ってみた

いつも見てくれている方はヘッダーの文字のフォントが変わっていることに気付いたことでしょう。
スマートフォンやガラケー向けのページでは変わりませんが…PCから見ても変わってない人はそのブラウザを窓から投げ捨ててモダンブラウザ使ってください。

国内初、無料で日本語のウェブフォントが手軽に利用できる「デコもじ」 - GIGAZINE
ここで紹介されていた「デコもじ」というサービスに登録してWebフォントをつかっています。

使い方

まずはOpenIDを用意します。はてな市民ならはてなのIDを使うことができるのでそれでいいかなと思います。
ひととおり会員登録を済ませると、webサイト登録のためのモーダルウィンドウが出てきます。

これにサイト名とURLを登録すると、スクリプトが発行されるので、ブログの適当なところに貼り付けます。はてなブログならフッターに仕込むのがいいかと思います。
次はフォントを選びます。いろいろフォントがあるのですが、無料で使えるのは「おためしフォント」だけのようです。
この中から私が選んだのは「ゆる字」です。
ここで「利用する」ボタンを押すとWebサイトでフォントが使えるようになります。このあと、「編集」タブを選んで編集画面を表示します。

ここでページのどの部分にフォントを使うかを指定します。指定する方法は右カラムにエディターを使う方法と、セレクタで直接指定する方法の2種類です。今回はセレクタで直接

header h1 a

と指定しました。
あとは右の+ボタンを押すと完了です。ブログのほうを見るとフォントが変わっていますね。

おまけ

Webフォントについて調べている途中で、クロスドメインだめだって知りました。XHRLevel2と同じ方法で回避できるらしいですが…