読者です 読者をやめる 読者になる 読者になる

姫呂ノート

散文的な個人ブログ

スポンサーリンク

ブログに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になったはずだ。

注意点

Webフォントは、フォントの内容を毎回サーバーから読み込む。つまり、そのぶんだけサイトが重くなってしまうのだ。

僕のブログではそこまで問題はなかったが、サイトの構成次第では激重になってしまう可能性がある。いつでも導入前の状態に戻れるよう、各自で工夫しておくことが望ましい。

スポンサーリンク