日本語のGoogleWebフォント確認用の簡易ツールを作りました。

ウェブフォント、使ってますか？
レスポンシブデザインやSEO対策の流れもあり、文字を画像にすることは敬遠されがちな時代です。モリサワもWebフォント出してますし、気軽にフォントにこだわるなら、ウェブフォントを入れてしまうのがお手軽だしイマドキなのではないでしょうか？

とはいえ、複数のフォントを呼び出してしまうと、リクエストが過剰になり、ページ表示速度に悪影響をもたらしてしまいます。

ウェブフォントを選ぼう！

英字のフォントは充実しているのですが、日本語だとなかなか種類も限られるんです...

というわけで、Googleさんが公式に出している 「Google Fonts + 日本語 早期アクセス」 をもとに、簡単に切り替えできるページを作ってみました。

こちらを参考に、ご自身の環境に合うフォントを探してみてください。
ページ全体だけでなく、H1やH2などの見出しや、タグなどのキーワードに使ってみるのもオススメです。

たとえば、m+1pを環境に設定する場合

codepenの「Change View」をクリックしてください。

「Editor View」に変更し、HTML、CSSからそれぞれ、該当するフォントのものをコピーします。

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

これを、HTMLのヘッダに記載してください。

.wf-mplus1p { font-family: "Mplus 1p"; }

これは、CSSに追記してください。
なお、全てに適用したい場合や該当するタグに設定したい場合は、それぞれのfont-familyの先頭に追加します。

クラスを追加した場合は、【適用したい箇所に追加したcssクラス名】を追記すれば完成です。
試しに【】内はニコ文字、H2、H3はM+1pにしてみましたヽ(•̀ω•́ )ゝ✧

参考ページ

• Google Fonts + 日本語 早期アクセス