ちょっとサイトを彩るのにGoogle Fontsは、何かと便利です。
ウェブサイト上のフォントを変更して、HTMLとCSSをチョチョっと編集するだけで、手軽に表現力豊かな多くのフォントを利用することができます。
そのやり方は、以前にも書きました。
目次
通常のGoogle Fonts利用で起こる問題点
ただ上記の方法は、Googleのサーバー上（fonts.googleapis.com）から直接フォントを呼び出す方法です。
ですので、Googleサーバとの接続に何かしらの不具合があれば、フォントが呼び出されず、表示されないなんてこともあります。
僕も、テーマなどでGoogle Fontsから選んだ「Boogaloo」というフォントを利用しています。テーマでは、以下のような、Evernoteをクリップする用の文字として使用しています。
ただ、最近Googleのサーバーの状態が悪いのか、それとも他に原因があるのかはわかりませんが、Googleフォントが呼び出されず、以下のようにフォントが適用されないで表示されているのをよく見かけました。
「フォントが適用されないだけで、こうも印象が違うものなのか」と思うくらい結構印象が違って見えます。
ですので、Googleフォントが、Googleサーバー上から読み込めないのを回避する対策として、Googleフォントを一旦ダウンロードして、自分のサーバーに置いて利用する方法を試してみました。
そしたら、意外と簡単にできたので紹介したいと思います。
主な手順
今回行う主な手順は以下の3手順です。
- 以前利用していたGoogle Fonts呼び出しを削除
- Google Fontsから目当てのフォントをダウンロード＆設置
- フォントを呼び出すCSSの記述
利用するだけなら、2手順なので、思ったより簡単です。
今回は、単純な例として「Boogaloo」というフォントファイルをWordpressテーマ内に設置して利用する方法を紹介したいと思います。
以前のGoogle Fonts呼び出しを削除
もし以前に、Google FontsをGoogleのサーバー上から呼び出すタグを記述していた場合は、その部分を削除する必要があります。
今回初めて利用するという場合は、この項目を飛ばしてください。
僕の場合だと、「Boogaloo」というフォントを利用するために、Googleサーバーから以下のようにCSSファイルを読み込んで、Googleサーバー上のフォントを利用していました。
<link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
こういった部分を削除します。
フォントをダウンロード＆設置
次に、Google Fontsから目当てのフォントをダウンロードします。
今回は、「Boogaloo」というフォントを利用するので、それをダウンロードしてみたいと思います。
フォントのダウンロード方法
フォントをダウンロードするには、まず、Google Fontsに移動します。
すると以下のような画面になるので、好きなフォントを探します。
僕は今回、「Boogaloo」というフォントを利用するのでフォント名で検索しました。
すると、以下のような検索結果が表示されるので、「Quick-Use（矢印のアイコン）」ボタンをクリックします。
すると以下のような画面が表示されるので「Add フォント名 to your collection」ボタンをクリックします。
その後、「↓（下向き矢印）」ボタンをクリックします。
すると、以下のようなダイアログが表示されるので「.zip file」リンクをクリックしてzipファイルをダウンロードします。
フォントの設置
ダウンロードしたファイルを解凍すると、以下のように、フォントとライセンスについて書かれたテキストファイルが入っています。
これらを、サイト作成フォルダ内に設置します。
今回は、Wordpressのテーマに設置するので、僕は以下のようなディレクトリにファイルを置きました。
WordPressテーマフォルダ/webfonts/boogaloo
あとはCSSで、ディレクトリ内のフォントファイル（今回の場合はBoogaloo-Regular.ttf）を呼び出して利用します。
Google Fontsにあるフォントのライセンスは、それぞれ違うので、ライセンスの内容は確認するようにしてください。僕が見た中では、Apache License2.0とか、SIL Open Font Licenseなどがありました。
CSSファイルで呼び出し
最後にサイトなどで利用しているCSSファイルに以下のようなフォントの呼び出しを記述します。
@font-face {
font-family: フォント名;
src: url('フォントファイルの場所') format("フォントの種類");
}WordPressテーマの場合は、style.cssなどでOKだと思います。
今回Wordpressテーマに設置した場合は、style.cssファイルに以下のように書きました。
@font-face {
font-family: Boogaloo;
src: url('webfonts/boogaloo/Boogaloo-Regular.ttf') format("truetype");
}あとは、目当てのCSSセレクタを選択して、フォントを設定してやればOKです。
a.evernote-arrow-box-link{
font-family: 'Boogaloo', cursive;
font-weight:normal;
}動作確認
このように書くことで、Googleサーバーから、Googleフォントを読み込ま無くても、フォントが適用された状態で表示されるようになりました。
まとめ
今回の方法は、Googleのサーバー状況等の影響は、受け無くなるので、Googleサーバー側（もしくは回線）に何かあったとしても、自前のサーバー内からフォントが呼び出されるので、表示が崩れることはありません。
あと、自分のサーバーに特別問題がない限り、1つ呼び出すファイルも少なくなることだし、多少表示も早くなると思います。（訪問者のブラウザにGoogle Fontsがキャッシュされている場合を除く。）
ただし、フォントを自前のサーバーに置く分、サーバーの負荷はかかります。今回の、「Boogaloo-Regular.ttf」の場合だと、サイズが34KBあるので、その分余計にサーバに負荷がかかります。OpenSansフォントの「OpenSans-Regular.ttf」ファイルだと、213KBとかになります。
特にGoogleサーバーから、フォントを呼び出して表示に不具合がなければ、そのままでOKだと思います。
ただ、「たまにGoogleサーバーからのフォントが読み込まれていない」なんてことがよくあって、気になる場合は、今回の方法は有効ではないかと思います。
