ブログにGoogleのWebフォントを導入した

ブログにWebフォントを導入したので、備忘録もかねて記事を書くことにした。ちなみに導入の動機は完全に出来心だった。反省はしていない（そもそも反省の必要がない）。もう少し詳しく言うと、ブログのカスタマイズをしていたら楽しくなってきたので、調子に乗ってWebフォントを導入してみることにした。

Webフォントとは何か

そもそもWebフォントとは何か。

通常、ブログなどのウェブサイトはコンピュータにインストールされているフォントでしかテキストを表示できない。Windowsでブログを見たときと、Macでブログを見たときに印象が異なるのはそのためだ。

しかしWebフォントは、他のサーバーにアクセスして、そこからフォントを引っ張ってくる。つまり、ユーザーがどの端末を使っていようが関係なく、常に同一のフォントを表示できるのだ。

無料の日本語Webフォント

Webフォントには有料のものと無料のものがあるのだが、無料のもののなかでも特にクオリティが高いのが「Noto Sans Japanese」というフォント。Googleとアドビが共同で開発したのだ。

googledevjp.blogspot.jp

本来は端末にインストールして使うフォントなのだが、試験的に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になったはずだ。