今、沢山のフォントが紹介されていますが、今日はフォントの紹介ではなく、webフォントを使用する方法について書いていきたいと思います。
Google Font API
このGoogle Font APIの使い方はいたってシンプルで簡単です。CSS をリンクするだけ!
使いたいフォントを選び、 フォント名を記述するだけになります。 (現在501個のフォントがあります。)
記述方法ですが、
- CSS内に@importで記述する
- HTMLのheader内に記述する
- javascriptを記述する
上記の3種類がありますので、お好きなモノを選択して下さい。 記述方法の詳細もGoogle Font APIサイトで書かれていますので参考にしてみてください。

上記の図のQuick-useという文字をクリックすると書き方の詳細が表示されます。
今回は、HTMLのheader内に記述する方法を書きたいと思います。
header内に記述
以下をHTMLのheader内に記述します。
1 |
<link href='http://fonts.googleapis.com/css?family=使用するフォントの名前' rel='stylesheet' type='text/css'> |
これで、選択したフォントが使える準備ができました。次にCSSに以下を記述し、HTML(使用したい場所)に反映させます。
1 2 3 |
body { fontfamily: "使用するフォントの名前"; } |
ここでは、bodyのフォントは、使用するフォントの名前にするということが書かれています。 記述はこれで終わりです。
あとは、指定したフォントが表示されているか確認するのみ!!
※ Google Font API で公開されているフォントはすべてオープンソースですが、日本語は未対応です。
好きなフォントをサーバーに置いて使用する。
@font-faceを使って、ユーザーのPCに存在しないフォントもWeb上のフォントファイルをダウンロードして表示させます。
※ フォントファイルは別ドメインから読み込むことはできないので注意してください。
以下のようにCSSに記述します。
1 2 3 4 5 6 |
@font-face { font-family: 'フォントファミリー名'; // 使いたいフォント src: url('フォントファイルのurl'), // フォントの場所 src:local('フォントファミリー名'), // ローカルにあるフォントの場所 font-weight: font weight 値; // フォントの値 } |
では、実際にどのように使用するかというと、手順としては、
- 使いたいフォントを決める(使うフォントの著作権などに気をつけてください)
- 使える形式に変換する
- 実際に使う
です。
今回の使える形式に変換する とは、WOFF形式やeot形式にすることです。
対応ブラウザー

図を見ていただけるとわかるのですが、対応するフォント形式がそれぞれに違います。ですので、それぞれに対応する形にしてあげなくてはなりません。
ツールを使ってWOFF形式やeot形式に変換します。
※ フォントとWOFFの相互変換を行うソフトで、サイトへいくと対応ブラウザの事なども詳しく書かれています。
動作環境
- Windows版 Windows 2000/XP/Vista/7
- Mac版 Mac OS X 10.4 以降
WOFFコンバータの使い方はとっても簡単です。サイトに手順が書いてありますので、その通り実行するだけ!! 変換を終えたらあとはアップロードして、以下の様に記述すれば使える様になります。
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ font-weight: nomal; } |
フォントファイルのurlは、相対参照で大丈夫です。
どうして2種類ものファイルを作成しているかというとtruetypeで、大部分のブラウザをカバー出来ますが、IE8以前では対応していないのと、ライセンスの問題等がある為、現在はWOFF形式を使うのが一般的です。
しかし、webフォントが対応していない古いブラウザもありますので、これでどんな環境で見ても自分の選んだフォントが表示されるというわけではありません。
ですので、幅広く対応させようとするならTrueTypeフォントをSVGフォントに変換しJavascriptを用いて設置やHTMLのテキストをJavascriptによって、Flash (swf)に置き換える仕組みなども考慮しなくてはいけないかなと思います。
rueTypeフォントをSVGフォントに変換しJavascriptを用いて設置についてはこちら
HTMLのテキストをJavascriptによって、Flash (swf)に置き換える仕組みについてはこちら
※ 上記サイトがかなり参考になりました。