今までのWebページはfontを指定してもクライアントのPCにWebページ側から指定されたフォントがインストールされていなければ正しく表示されませんでしたが、CSS3からサーバー側にインストールされているフォントをクライアント側に表示させる事が可能になるそうです。
ただ、このブログはサーバーの設定をいじれないので今回はグーグルの公開しているAPIからWebフォントを利用してみたいと思います。
http://www.google.com/webfont
↑上記リンクURLの文字列もグーグルのWebFontを利用してみました。
利用方法は簡単で好きなフォントを選んで指定されたlinkタグをhead内に挿入し、CSSに適用したいタグやclassを書きこむだけです。
例）
リンクのタグ
<link href='http://fonts.googleapis.com/css?family=Miltonian+Tattoo' rel='stylesheet' type='text/css'> |
フォントのCSS
h1 { font-family: 'Miltonian Tattoo', arial, serif; } |
注意点など。。
グーグルのwebフォントは今のところ英数字だけのようです。
といいますのも日本語のfontは漢字・ひらがな・カタカナなど膨大な量がありいちいちwebから呼び込んでいたら時間がかかってしまいます
（日本語フォントは容量的に３Mくらいあります）。
ですので正直な話、日本語サイトではわざわざWebFontを使わないで、数キロバイトの画像イメージに置き換えたほうが効率がいい気がします。
ちなみに日本語WebFontを利用出来るサービスも存在します。
http://decomoji.jp/
こちらの「デコもじ」というサイトでは一部無料でWebFontの公開を行っているようです。
せっかくなので私も使ってみました。
このブログのタイトルと説明文をデコもじのサービスを利用してWebFont化してみました。
実際のブログタイトルと説明文をマウスでドラッグしてみるとテキストで表示されているのが確認できると思います。
（やっぱり読み込みがちょっと重い感じがします・・・）PR
