GoogleがクラウドでWebフォントを配信していましたが、日本語Webフォントは重いイメージがあったので敬遠していました。しかし、さほどそうでも無さそうなので、サイトのフォントを変えてみました。以下覚書として。

設定は非常に簡単。使用したフォントは「Noto Sans Japanese」。「Noto Sans Japanese」は、AdobeとGoogleが共同開発したフォントです。Noto Sans CJK JPと言う名でダウンロードも出来ます。設定方法は、CSSでWebフォントを読み込み、CSSで設定したい箇所のfont-familyを「Noto Sans Japanese」に指定しただけです。

CSSかHTMLに挿入

<style>
  @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
</style>

CSSでfont-familyを指定

<style>
body *{
  font-family: 'Noto Sans Japanese', sans-serif;
}
</style>

懸念していた重さについてですが、更新し1回目だけいつもより遅く表示。その後はキャッシュを読み込んでいると思うので、いつも道理の表示に戻りました。スマートフォン(iphone6 plusにて)での表示も同じく1回目だけ遅く表示。その後は通常道理の表示スピード。恐らく、閲覧者が他のサイトで同じWebフォントを既にキャッシュしていたら、読み込みも軽減されると思われます。

「Noto Sans Japanese」はフォントウェイトも幾つか用意されているので、必要に応じて太さを変えてみるのもよいかもです。

<style>
h1{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight: 900;
}
</style>

Gravatars

コメント欄にアイコンが表示されるBlog様も多く見られますので、自分もアバターアイコンを便乗表示してみようとかテスト。

手っ取り早くGravatarsで即終了。Gravatars(Globally Recognized Avatar：グラバター) とは、広い範囲で利用できるアバターです。Gravatar はアイコンであり、フォーラム、チャット、ウェブサイトのような仮想現実上のオンライン・コミュニティの中で、そのユーザーの身代わりとなって…云々。

表示させたい画像とセットに使うメールアドレスを用意しGravatarsに登録。自分は当サイト限定での使用ですので、Adminで設定したメールアドレスで設定。Siteの管理人の場合はログイン状態でコメントを書くと、自動でメールアドレスが入力された状態で投稿されるので、セットに設定した画像も表示されます。

WordPressテーマにGravatarsアイコンを表示するテンプレートタグが無い場合は、以下のテンプレートタグをアイコンを表示したい所にセットしてください。

[php]<?php echo get_avatar($comment, 45); ?>[/php]

($comment, 45)の数値はアイコンのサイズを表します。