Tweet

Pocket

サーバ上からフォントをダウンロードし、指定して使用できるCSS3「@font-face」をご紹介します。

この機能により従来のHTMLでは指定できなかったフォントでテキストを作成するこができます。テキストなので簡単に修正などもでき、SEOにも問題ありません。

【使用例】
※フォントはフリーで配布されている「ふい字フォント」を利用しています。
ダウンロード先：https://hp.vector.co.jp/authors/VA039499/

@font-face {
　　font-family:HuiFont;
　　src:url('HuiFont29.eot');
　　}

@font-face {
　　font-family:HuiFont;
　　src:url('HuiFont29.ttf') format('truetype');
　　}

body {
　　font-size:120%;
　　font-family:HuiFont;
　　}

使用するフォントの指定は「@font-face」で行います。「font-family」で使用するフォントの名前を指定し、「src」で使用するフォントのURLを指定します。「format」は指定するフォントのフォーマットごとに異なります。
「@font-face」で設定したフォントを、フォントを使用する要素（使用例ではbody要素）で指定します。

【@font-faceの書式】

@font-face {
　　font-family:フォントの名前;
　　src:url('フォントのurl') format('フォーマット');
　　}

「フォーマット」に指定する値は、フォントのフォーマットごとに異なります。対応は以下のようになっています。

.ttf → truetype
.ttf .otf .ttc → opentype
.eot → embedded-opentype

IEは「Embedded OpenType」のフォントにしか対応しておらず、@font-faceの書式のformatに対応していません。その為上記の使用例のようにIE向けのformatを記述しないフォント指定を先に書き、他のブラウザ向けのformatの記述があるフォント指定を後に書くように記述します。
また、IE向けのEmbedded OpenTypeのフォントはTrueTypeのフォントを変換するサービスttf2eot（https://ttf2eot.sebastiankippe.com/）を利用するとよいです。

【対応ブラウザ】
IE6以降、FireFox3.6以降、Opera10.6以降、Safari4以降、Chrome3以降