高価なフォントが何と無料!! TypeSquareのWebフォントを使ってみた!!
Webフォントを使ったデザインにこだわったサイトが増えてきました。
たまに見かけると「おっ!」と思っちゃいます。
デザイナーたる者、フォントにはこだわりたいものです。
Webフォントを使えば、その端末に「入っていない」、クールなフォントを使ってサイトを表示させることができます。
簡単に言えば、ネット上に置かれたフォントをダウンロードさせて表示する仕組みです。
無料のWebフォントもあるようですが、人気のフォントは大抵有料です。
Webフォントを配信しているサイトは日本にも数社あります。
そんな中、老舗フォントメーカーのモリサワが運営しているTypeSquareが熱い!!
何と、無料で使えるプランがあるのです!!
無料プランだと制限はありますが、好きなフォントを1種類、月に1万PVまで表示してくれます。
ほとんどの個人運営サイトやブログの場合、月に1万PVもいかないのでは?
なお、TypeSquareでは、Webフォントのことを「クラウドフォント」と呼んでいるようです。
ちなみに、これを書いている今現在も、TypeSquareのWebフォント「ナウ-GM」を使っています。
もしあなたの使っている端末のOSがWindows以外で(後述)、比較的新しいブラウザを使っているなら、ここに書かれている文字はナウ-GMで表示されていることでしょう。
iPhoneも対応していますよ!
ただし、WindowsではWebフォントを使わない設定にしています。
なぜかと言いますと、Windowsではフォントを綺麗に表示するフォントレンダリングという機能が弱く、せっかくのフォントの表示がギザギザになってしまうからです。
本当にWindowsには何とかしてもらいたいのが、このフォント表示周りです。
仕方ない。WindowsではWebフォントもヒラギノも諦め、標準のメイリオを使うことにしました。
そこで書いたのが以下のスクリプトです。ヘッダーに書いたこのJavaScriptでOSを判別し、Windowsとそれ以外のCSSでのフォント指定を分けました。
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript" src="http://typesquare.com/accessor/script/typesquare.js?XXXXXXXXXXXXXXX" charset="utf-8"></script> <script type="text/javascript"> if(navigator.platform.indexOf("Win") != -1){ document.write('<style type="text/css">*{font-family:Meiryo;}</style>'); }else{ document.write('<style type="text/css">*{font-family:"ナウ-GM","NOW-GM";}</style>'); } </script> |
「XXXXXXXXXXXXXXX」の所や、「font-family:」の指定は、ご自身の設定に合わせて下さいね。
Enjoy!
最近のコメント