テクノロジー・動画・写真・デザインとか

Webフォント「Google Web Fonts」の使い方と利用時の問題点

最近、ちょこちょこ自分のサイトのCSSをいじったりしているが、段々と認知されてきているWebフォント「Google Web Fonts」が熱いのかなと感じたり。

Webフォントは、Webページの見栄えをよくするためにCSS 3から導入された技術で、指定された場所からWebフォントをダウンロードして表示するものだ。
これにより、対応しているiPhoneなどのスマートフォン端末などでも同じフォントで表示することができる。

そして、無料で配布してくれいるのがGoogle Web Fontsだ。

Google Web Fontsの基本的な使い方

Google Web Fontsにアクセス
http://www.google.com/fonts

フォント選択画面

①でワードや、センテンス、パラグラフなどから好きなプレビューフォーマットを選択。
②に好きなテキストを入力してプレビューで確認。
③で気に入ったフォントを複数選択して使用して確認すると楽なのでお薦めだが、もちろん、単独で選択することもできる。
④選択が終わったら「USE」で次の設定画面へ。
Google Wev Fonts選択画面

続きを読む

次の画面では、フォントの太さやイタリックを選択できるが、あまり選択するとページのロード時間が掛かるので、最小限に抑えるのがいいだろう。
フォントスタイルの選択

画面をスクロールして、コードの選択。
フォントをインポートするタイプの選択

headerに読み込む「Standard」と、スタイルシートファイルにインポートする「@import」、「JavaScript」でのフォントを読み込みを指定できるが、綺麗にまとまる「@import」がいいだろうと思って使っていたらAdsenseアドバイスからそれだと遅いから、と言われたので通常の「Standard」で読みこむようにした。

複数フォントの場合、こんな風に表記されるが、使用したいフォントを上記にように記述するのは変わらない。

ユーザーの体感速度を向上させるという意味なら、javascritpで </body>タグの前にでも挿入するのがいいだろう。

後は、クラスなどで指定すればOK。

エフェクト

使う場面があるかどうか分からないが、炎など、こんな感じのエフェクトをGoogle Wev Fontsに掛けられるサンプルがこちらに記載されている。
Google Web Fontsにエフェクトを掛ける

手作業が面倒な場合は、こちらのサイトで簡単にエフェクトを掛けられる。
http://www.bestwebfonts.com/

Windows用Chromeのレンダリング問題

Google Web Fontsに限らず、現状の問題としてWindowsのChromeで表示させると、フォントサイズによっては微妙にジャギって表示されてしまう。
下記の例で見ると「G」なんかがスムーズに表示されていないのが分かる。
Google Chromeのレンダリング問題

これは、Windows Google Chromeのレンダリングに問題があるようで、下記をCSSにぶち込んで値を調整することで多少のジャギーを軽減できる。

SVGを使ってさらに綺麗に見せる方法というのもあり、下記ページに記載されているので参考にするといいだろう。
http://www.fontspring.com/blog/smoother-web-font-rendering-chrome (英語)

或いは、使用する場所が限定されるが、なぜだかフォントのサイズを49px以上にすることでジャギーが表示されなくなる。

お薦めのフォント

綺麗なフォントのみを紹介しているBeautiful Web Typeあたりを参考にするといいだろう。

個人的には、ここらへんがお薦めで、特にLatoは素敵だ。

Open Sans

http://www.google.com/fonts/specimen/Open+Sans

Lato

http://www.google.com/fonts/specimen/Lato

Old Standard TT

http://www.google.com/fonts/specimen/Old+Standard+TT

Vollkorn

http://www.google.com/fonts/specimen/Vollkorn

Droid Sans

http://www.google.com/fonts/specimen/Droid+Sans