ブログにWebフォントを導入したので、備忘録もかねて記事を書くことにした。ちなみに導入の動機は完全に出来心だった。反省はしていない（そもそも反省の必要がない）。もう少し詳しく言うと、ブログのカスタマイズをしていたら楽しくなってきたので、調子に乗ってWebフォントを導入してみることにした。
Webフォントとは何か
そもそもWebフォントとは何か。
通常、ブログなどのウェブサイトはコンピュータにインストールされているフォントでしかテキストを表示できない。Windowsでブログを見たときと、Macでブログを見たときに印象が異なるのはそのためだ。
しかしWebフォントは、他のサーバーにアクセスして、そこからフォントを引っ張ってくる。つまり、ユーザーがどの端末を使っていようが関係なく、常に同一のフォントを表示できるのだ。
無料の日本語Webフォント
Webフォントには有料のものと無料のものがあるのだが、無料のもののなかでも特にクオリティが高いのが「Noto Sans Japanese」というフォント。Googleとアドビが共同で開発したのだ。
本来は端末にインストールして使うフォントなのだが、試験的にWebフォントとしても提供されている。今回は、それを導入した。
Noto Sans Japaneseの導入方法
では、Noto Sans Japaneseをはてなブログに導入する方法を紹介しよう。
「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」の順に移動し、以下の記述をコピペする。
<link href='http://fonts.googleapis.com/earlyaccess/notosansjapanese.css' rel='stylesheet' type='text/css'>
次に「デザインCSS」へ移動し、以下の記述をコピペ。
html, body {
font-family: 'Noto Sans Japanese', sans-serif;
}
これでOKなのだが、GoogleのWebフォントは著作権を表記しなければならない。以下の文章も合わせて「デザインCSS」に記載されたし。
/ Copyright (C) Google * https://www.google.com/get/noto/ * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. /
これでブログのテキストがNoto Sans Japaneseになったはずだ。
注意点
Webフォントは、フォントの内容を毎回サーバーから読み込む。つまり、そのぶんだけサイトが重くなってしまうのだ。
僕のブログではそこまで問題はなかったが、サイトの構成次第では激重になってしまう可能性がある。いつでも導入前の状態に戻れるよう、各自で工夫しておくことが望ましい。