ただ眠いんだ

人生はコメディだ!

Googleの日本語ウェブフォント導入してみたので導入法を解説する

2016/10/19より、ウェブフォントサービスのGoogle Fontsが日本語フォントを提供し始めた。

この記事を公開している時点で、このブログの多く(記事タイトルや本文)は「Rounded M+ 1c」というフォントで表示されている。ウェブフォントを導入すると、ブログのデザインの幅が広がる。
そんなわけで、はてなブログでの使い方を解説してみようと思う。

この記事は、少しばかりCSSなどの知識がある人向けに書かれています。「コピペをすれば万事解決!」というような親切な物ではありません。
ウェブフォントを使用するとページ読み込みはほぼ間違いなく遅くなるし、今回発表された日本語ウェブフォントは「現時点で完全にはサポートしていないフォントを試験的に提供しています」という注意書きの元に提供されている。試してみるのは自己責任で。
あと、ブログのカスタマイズをするときには、ちゃんとCSSなどのバックアップを取っておくことを強くオススメしたい。


スポンサーリンク


ウェブフォントを使うために必要なふたつの段階

日本語に限らずウェブフォントを使用するには、ふたつの段階がある。
まずひとつ目は「ウェブフォントを読みこませるための記述」で、ふたつ目は「ウェブフォントを設定するための記述」である。

ウェブフォントを読みこませるための記述

上記サイトの場合、使いたいフォントの右下に表示されている「link href」から始まる一行をコピーしてくる。
Rounded M+ 1cのフォントならこの記述だ。

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

これをはてなブログの、デザイン→カスタマイズ→ヘッダ→タイトル下に貼り付ける。
こうすることで、このページへのウェブフォントの読み込みができる状態となる。

フォントを設定する

読み込みの準備ができたら、次はCSSをいじって指定した部分のフォントを変更する。
どこのフォントを変更するかによって変わってくるが、基本的には

.任意のクラス {
font-family: 'Rounded Mplus 1c';
}

という記述を、デザイン→カスタマイズ→デザインCSSの一番下に記述すればよい。

文字の太さを変更したい場合

「Rounded M+ 1c」をそのまま指定すると、場合によっては文字がかなり細く表示されて、むしろ読みにくい…という事があるかもしれない。
その場合はCSSに「font-weight: 400;」とでも指定しておくとこのブログと同じ設定になる。

ウェブフォントのお作法

かなり色々なことを飛ばし飛ばしで書いたのだけど、ウェブフォントを導入するというのは、デザインと読み込みの重さのバランスが大事である。
このブログには「Rounded M+ 1c」の他にタイトルなどに「Montserrat」というフォントを使用しているのだけど、実感としては、モバイルユーザーのことを考えたらウェブフォントは2つまでが限度かなーと感じている。

まあ、用法用量を守ってお使いくださいな。