WEBフォント使ってみたいけど、どうやって使うの？というお話

2012.01.08 Category:Tutorial Tag:Font

今、沢山のフォントが紹介されていますが、今日はフォントの紹介ではなく、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内に記述します。

<link href='http://fonts.googleapis.com/css?family=使用するフォントの名前' rel='stylesheet' type='text/css'>

1	<link href='http://fonts.googleapis.com/css?family=使用するフォントの名前' rel='stylesheet' type='text/css'>

これで、選択したフォントが使える準備ができました。次にCSSに以下を記述し、HTML(使用したい場所)に反映させます。

body {
fontfamily: "使用するフォントの名前";
}

body {

fontfamily: "使用するフォントの名前";

}

ここでは、bodyのフォントは、使用するフォントの名前にするということが書かれています。記述はこれで終わりです。

あとは、指定したフォントが表示されているか確認するのみ！！

※　Google Font API で公開されているフォントはすべてオープンソースですが、日本語は未対応です。

好きなフォントをサーバーに置いて使用する。

@font-faceを使って、ユーザーのPCに存在しないフォントもWeb上のフォントファイルをダウンロードして表示させます。

※　フォントファイルは別ドメインから読み込むことはできないので注意してください。

以下のようにCSSに記述します。

@font-face {  
  font-family: 'フォントファミリー名';　//　使いたいフォント  
  src: url('フォントファイルのurl'),  //　フォントの場所 
  src:local('フォントファミリー名'),  //　ローカルにあるフォントの場所 
  font-weight: font weight 値;  //　フォントの値
}

@font-face {

font-family: 'フォントファミリー名';　//　使いたいフォント

src: url('フォントファイルのurl'), //　フォントの場所

src:local('フォントファミリー名'), //　ローカルにあるフォントの場所

font-weight: font weight 値; //　フォントの値

}

では、実際にどのように使用するかというと、手順としては、

使いたいフォントを決める(使うフォントの著作権などに気をつけてください)
使える形式に変換する
実際に使う

です。

今回の使える形式に変換する　とは、WOFF形式やeot形式にすることです。

対応ブラウザー

図を見ていただけるとわかるのですが、対応するフォント形式がそれぞれに違います。ですので、それぞれに対応する形にしてあげなくてはなりません。

ツールを使ってWOFF形式やeot形式に変換します。

WOFFコンバータ | 武蔵システム

※　フォントとWOFFの相互変換を行うソフトで、サイトへいくと対応ブラウザの事なども詳しく書かれています。

動作環境

Windows版　Windows 2000／XP／Vista／7
Mac版　　Mac OS X 10.4 以降

WOFFコンバータの使い方はとっても簡単です。サイトに手順が書いてありますので、その通り実行するだけ！！変換を終えたらあとはアップロードして、以下の様に記述すれば使える様になります。

@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;
}