Google Web Font を使ってみる

本項では、当ブログでGoogle Webフォントを導入した際の手順についてお話しします。

Webフォントを使った理由

まず、最初にテンプレートを作成した時点で、当ブログのタイトル部分はこのような表記でした。



なんだか味気ないですね。

「タイトルロゴを作ればいいじゃないか」ということも考えたのですが、実は、正式なブログタイトルがまだ決まっていなかったため、「画像ロゴを作ったあと「タイトル変更で」ということになってしまったら…」と思い、二の足を踏んでいました。

そこで着目したのが、「Webフォント」でした。
これなら文字を見栄えよくできますし、タイトルが変更されても文言を変えるだけでよく、手間もかかりません。

今回は数あるWebフォントの提供サイトから、折角Bloggerを使用しているのだからとGoogleを選択しました。

Google Web Fonts でフォントの選択

Google Web Fonts | http://www.google.com/webfonts

こちらのページに様々なフォントがリストアップされております。

画面左側では絞り込みができますので、

• フリーワード検索（Search）
• セリフやサンセリフなどの選択や太さ（Thickness）、斜めさ（Slant）、文字幅（Width）などフォントの雰囲気によるフィルタ（Filters）
• ラテン文字やキリル文字などの文字種選択（Script） ※残念ながら日本語フォントはありません

以上を組み合わせて、サイトデザインにあったものを選択します。

フォント一覧には各フォントの例文が表示されていますが、1文字1文字の形を知りたい場合などは、フォント下部の「pop out」クリックでフォントの詳細がポップアップ表示されますので、参考にしてみるとよいでしょう。


今回、当ブログではこのフォント「Geo」を選択しました。

フォントの下部にある「Quick use」をクリックして、フォントの情報を適宜確認、テンプレートに実装してゆきます。

1.Choose the styles you want (スタイルの選択)

まず、フォントのスタイルを選択します。

今回はスタイルは1つしかありませんが、他のフォントには文字の太さが異なる同じフォントが格納されている場合があります。それらの中から使用したいスタイルを決定します。


右のPageLoadメータは、フォントを読み込む際にかかる負荷です。
ごらんのとおり、読み込むスタイルの数でページにかかる負荷が大きく変わりますので、必要なものだけを選択します。

2.Choose the character sets you want (文字種の選択)

フォントによっては、複数の文字種（ラテン文字、キリル文字など）をサポートしている場合がありますので、必要なもののみ選択してください。（これを選択することによってもPageLoadメータは変化します）

3.Add this code to your website (webサイトへのコード埋め込み)

埋め込み方法として

• Standard
• @import
• Javascript

の3種類がありますが、今回はstandardを選択します。

テキストボックス内に表示されているlinkタグを、テンプレートのheadタグ内にコピー＆ペーストします。

4.Integrate the fonts into your CSS (スタイルシートに実装)

font-family…と表示されている文章を、webフォントを実装したい箇所に追加します。



当ブログの場合ですと、タイトルの「i-jupiter thinktank.」の部分に使用しております。

表示確認と変更

以上のテンプレートの変更を保存し、確認してみると、このようになりました。


なんとなくタイトルがかっこいいスマートな感じになりました。


これで実装完了です。簡単ですね。

実質、コードの変更は単純なコピー＆ペーストのみですので、もし他のフォントがいいなと感じても簡単に差し替えることが可能です。テンプレートを保存する前に、プレビュー表示で確認してみるのもよいですね。



文字の表現だけでもブログの雰囲気はガラリと変わりますので、ぜひ、活用してみてください。