Twitterで知ったのだが、Google製のWebフォントである「Google Fonts」の本家サイトで日本語がリリースされていた。
せっかくなので、この中からフォントを選んで当ブログに導入してみることに。いろいろ試してみたが、最終的に「M Plus 1p」で行くことに決めた。
設定方法は簡単だった。まず「M Plus 1p」の項目の右上にある＋ボタンをクリックする。そうすると、以下のようなカードが現れる。
「CUSTOMIZE」でフォントの大きさなどを細かく設定することもできるが、基本的にはそのままでいい。
で、「STANDARD」の下に次のようなコードが表示されている。
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">
これをはてなブログ内の「設定」→「詳細設定」→「headに要素を追加」のところにコピペし、画面下の「変更する」をクリックする。
次に、Googleフォントのサイトに戻る。「Specify in CSS」のところにもコードがあるが、それをはてなブログのCSSに書き込む。場所は「デザイン」→「カスタマイズ」→「デザインCSS」のところ。
「M Plus 1p」の場合は、
font-family: 'M PLUS 1p', sans-serif;
というコードだが、これを……
body {font-family: 'M PLUS 1p', sans-serif;}
というふうに記入する。要はbody {◯◯}とすればいいだけ。
記入したあとは「変更を保存する」をクリック。これでブログにGoogleフォントが導入されたはずだ。
さて、Webフォントは「どのOSからでもフォントが統一される」というメリットがある一方、フォントをサーバーからダウンロードする仕様上、普通のフォントよりも遅延が発生するというデメリットが存在する。とはいえ、さすがそこはGoogle。実際に導入してみても体感的にはまったく遅延を感じない。素晴らしい。
この調子でどんどん日本語のWebフォントが増えていってほしい。
追記
やっぱり気が変わって、「M Plus 1p」→「Kosugi Maru」に変えた。