ホームページを作成に関する備忘録

css3で独自フォントを読み込ませて表示する

cssファイル


@font-face{
font-family: kazufont2b_s;
src: url(webfont/kazufont2b_web_s.eot?) format("eot"),
url(webfont/kazufont2b_web_s.woff) format("woff"),
url(webfont/kazufont2b_web_s.ttf) format("truetype");
}

#fontchange p{
font-family: kazufont2b_s;
font-size: 130%;
color: red;
text-align: center;
}

htmlファイル


これは、自作フォントです。

必要なら「フォントの部屋」よりどうぞ。

 左記のようなCSSファイルとHtmlファイルにより以下のようになります。

これは、自作フォントです。

必要なら「フォントの部屋」よりどうぞ。

 ローカルにあるフォントは、それぞれ違っていますので、今までのようにfont-familyで指定しても、ローカルにフォントがインストールされていないと結局は指定通りのフォントで表示することができませんでした。しかし、CSS3では、@font-face{・・・・・}の書式で、サーバー上のフォントを使うことができるようです。ただ、フォントファイル自体をダウンロードしてくるため、日本語フォントファイルのように大きいとページが表示されるまでに時間がかかりそうです。そのため、使用するのにちょっと躊躇していましたが、武蔵システムさんのツールに「サブセットフォントメーカー」というものがありました。これは、フォントの中から必要な文字だけを取り出して、新しいフォントファイルを作るというものです。さらに、これをwoffフォントにも変換できるという優れものです。ということで、これを使用して必要な文字だけを取り出していますので、ファイルも小さくなりました。@font-faceでは、まずfont-familyでフォント名を指定します。またフォントの場所はurlとフォーマットは「src: url(URL) fotmat("フォーマット");」の書式で指定します。フォーマットは"truetype"で、TrueTypeフォント、"opentype"で、OpenTypeフォント、"embedded-opentype"で、Embedded Open Typeを示すことになります。

 もう一つの注意点は、ブラウザにより使用できるフォントのフォーマットが違うことです。特にIEは、EOTのみにしか対応していないようです。また、formatを指定すると、フォントが適応されなくなるそうです。そこで、IE対策として、src: url(webfont/kazufont2b_web_s.eot?)のように、最後に?を付けると、IEではそこで読み込みが終わるので大丈夫だそうです。