はてなブログのフォントをモリサワWebフォントに変えてみた～TypeSquareで簡単にデザイン性を出せるので採用してみよう
何気なくWebフォントについて調べてみたところ、モリサワのTypeSquareで1フォントファミリーに限り、無料枠で使用できるという事を知ったので、はてなブログでもできるのでは無いかな？と思って検索してみたら、既に導入している人がいて簡単にフォントを変更することが出来ました。
貴重な人柱情報をありがとうございます。前を歩いている後ろをついていくのは実に簡単な事なので感謝です。
要点だけ記しておく（後々の為に）
無料枠でできること
月間10,000PVまでWebフォントを配信してくれるという制限があるので、うちのブログは微妙なところですが、試しに採用してみることにした。無料枠では1フォントファミリーに限定されるので、そこは理解しておく必要があります。欲張っても配信してくれません。
あくまでもモリサワはフォントを売りたい訳ですから・・そこ理解しておきましょ
ユーザー登録
TypeSquareのサイトでユーザー登録を行う必要があります。氏名、住所、電話番号等を入力して、メールアドレスを登録すると、確認メールが届くのでアクティベートするだけで利用開始となります。
モリサワWebフォントを選ぶ
モリサワのサイトがわかりにくいのであえて記しておくと、無料枠で1つだけフォントファミリーを選ぶことができるので、無料枠の中で使うフォントを指定します。この回りくどい表現はわざとだという事はやってみれば分かるはずです。
Webフォントを使いたいサイトを登録する
サイトのURLを登録する必要があります。当然ながらここで登録したサイトのみに向けてWebフォントを配信してくれる仕組みです。複数のサイトで利用したければ有料登録するしかないですね、まっとうに考えると。
Javascriptコードを入手してはてなブログのHeadに設定する
コードが指定されるのでそれをコピーして、はてなブログの「設定」－「詳細設定」-「検索エンジン最適化」－「headに要素を追加」へ貼り付けます。
下記の様なコードですね。
<script type="text/javascript" src="//typesquare.com/accessor/script/typesquare.js?xxxxxxxx" charset="utf-8"></script>
CSSカスタマイズにフォントファミリーを指定する
はてなブログの「デザイン」－「カスタマイズ」－「デザインCSSカスタマイズ」にフォントファミリーを追加します。デザインCSSのカスタマイズは既存のCSSを上書きする優先度を持っているので、ここでフォントファミリーを指定したらテンプレートで指定されたフォントを上書きしてサイト全体に効きます。
フォント名はもちろん自分のお気に入りを指定するのは言うまでもないですね。
body { font-family: "フォント名"; }
最後に
月間PV10,000までという制限があるものの、フォントを変更するだけでかなり雰囲気が変わるので、テンプレート（スキン）に拘っているブロガーさんは、一度お試ししてみる価値はあると思いますね。
かなり自己満足度が高いと思います（ｗ
追記
スマートフォンの場合、回線速度が遅いことが多々あるので、スマートフォン等のモバイルデバイス（画面幅が狭い）を除いた場合だけCSSでWebフォントを適用する様にカスタマイズしました。
CSSの定義によりデバイスの画面幅でWebフォントが置き換える仕組みですが、Webフォントを使うとユーザービリティにどう影響するかは様子をみてみないと分かりません。サイトの雰囲気は変わるものの単なる自己満足に過ぎないかも知れませんし・・
こんな感じにしてみました。min-device-widthで767px幅以上の時だけWebフォントを適用する例です。
@media screen and (min-device-width: 767px) { /* モリサワWebフォント */ body { font-family: "フォント名"; } }
