画像を使わなくても意図したフォントが表示できる-Google Font API-

悲しいことに、Webサイトはユーザーの環境に依存するため、指定できるフォントが決まっています。

ゴシック体なら、MS Pゴシック、ヒラギノ角ゴ、Osaka
明朝体なら、MS P明朝、メイリオ、細明朝体、ヒラギノ明朝
サンセリフ体（日本ではゴシック体とも呼ばれる）なら、Arial、Helvetica、Geneva、sans-serif
セリフ体（日本語では明朝体とも呼ばれる）なら、Georgia, Times New Roman, Times, serif

これらはWindowsまたはMacにデフォルトで入っているフォントタイプ。

これ以外のフォントも指定できますが、明朝体である「リュウミン」を表示させたいと思っても、閲覧側のPCに「リュウミン」が入っていないと正しく表示されません。
そのため、意図するフォントタイプをWeb サイト上で表示させたいと思ったら、その部分を画像文字にするしかありません。

でも、それをある程度解決する方法が最近出てきました。

まあ、すてき(￣▽￣*)

「Web Font」は、意図するフォントタイプを表示させるための方法です。
サーバーにフォントをインストールし、その情報をサーバーから引き出すことによって、閲覧者PCにインストールされていないフォントを表示します。
今のところ、海外ではちょいちょい利用されているようですが、漢字・ひらがな・カタカナ・アルファベットとたくさんの文字情報を必要とする日本語の場合、ちょっと実装が難しいだろうなあ・・というのが現在の感想。

でも、新しい技術は使ってみたいよね(￣∀￣*) ｲﾋ

と、言うことで。

ここは先日リリースされた「Google Font API」で手軽に利用しましょう。

現在18タイプのフォントがあり、その中から使いたいフォントを選択。

今回は「Tangerine」を利用するテキストをp class=”ex1″というクラスを振って例にします。

まず、リストの中から使いたいフォントを選びます。
サンプルなどの詳細ページに移動しますので、その中の「Get the code」を選択すると、コード情報を得ることができます。今回は「Regular」で記述。
[cc lang=”html4strict”][/cc]
と、リンク。

その上でCSSを追加
[cc lang=”css”]

[/cc]

ここまで設定すれば、あとはテキストを打ち込むだけ。

Tangerine

同様の設定をすれば、18種類のアルファベットフォントが利用できます。

Yanone Kaffeesatz

Josefin Sans Std Light

Reenie Beanie

いかがでしょうか？
アルファベットのみですが、フォントにこだわりたいけど、画像文字は使いたくないという時は便利だと思います。