【CSS3リファレンス】@font-face

こんにちは（・∀・）

CSS3で新しく追加された機能をご紹介します。今回ご紹介するのは@font-faceで使用するWebfontです。

概要

Webサイト上で表示できるフォントはパソコンにインストールされたフォントだけです。インストールされているフォントはユーザーごとに異なるので実際に使えるフォントはパソコンにデフォルトでインストールされているフォントだけになります。

@font-face {
  font-family: myFonts;
  src: url("フォントurl") format("opentype");
}
.sample {
  font-family: myFonts;
}

CSS3ではサーバ上にあるフォントを指定してWebサイトで使用することができます。それによってユーザーの環境に左右されずに意図したデザインのフォントを利用して表示することが出来る様になりました。ただし、日本語フォントは文字数が多いため読み込みに時間がかかるというデメリットもあります。また、Webフォントとして使用するための使用ライセンスには注意が必要です。

WebフォントをWebサイトで使用するには、日本語のフリーフォントを探し、フォントのライセンスを確認、Webフォントファイルを作成してサーバにアップしてCSSで指定、フォントのURLとフォーマットを指定し、それに名前を付け、その付けた名前を通常のfont-familyで指定して使用します。

ブラウザ毎に指定方法が異なるのでご注意ください。

CSS

@font-face {
  font-family: myFonts;
  src: url("//example.com/font/sample-font.eot") format("eot"),/*For IE*/
  url("//example.com/font/sample-font.woff") format("woff"),/*For Modern browser*/
  url("//example.com/font/sample-font.ttf") format("truetype");/*For iOS Android*/
}
body {
  font-family: myFonts;
}

フォーマットを指定する場合の文字列

.ttfまたは.otfだけでもIE以外にはほぼ対応していると思いますが、念のためIE用に.eotも用意しました。.woffがある場合は.ttfや.otfよりも軽いのでそちらを使用すると遅延が軽減されますが、まだ全てのブラウザに対応されていないため初めに.woffを指定してから.ttfを指定するように設定します。最初に記述された方が採用されます。ない場合は次の指定を採用します。

.ttfまたは.otfどちらを使用しても問題ありません。

IEに対応させるにはフォントを.eotに変換して別にアップする必要があります。フォントのフォーマットを変換するサイトはありますが、日本語フォントは容量が多いためか、時間がかかったり、変換に失敗することが多いです。アプリをインストールする手間はありますが、こちらのWOFFコンバータは.eotに変換することもできて便利です。

サンプル

HTML

<p class="demo1">このサンプルデモのフォントは(ふい字置き場。)からダウンロードしてきた(OhisamaFont11.ttf) をサーバにアップしてWebフォントとして使用してます。</p>

CSS

@font-face {
  font-family: font-demo1;
  src: url("//example.com/font/OhisamaFont11.eot") format("eot"),/*For IE*/
  url("//example.com/font/OhisamaFont11.woff") format("woff"),/*For Modern browser*/
  url("//example.com/font/OhisamaFont11.ttf") format("truetype");/*For iOS Android*/
}
.demo1 {
  font-family: font-demo1;
  font-weight: normal;
  font-style: normal;
  font-size: 140%;
}

Result

Google Fonts

Google Fontsなら簡単にWebフォントを利用することができます。Google Fontsサイトで使用したいフォントを選びます。Reviewボタンをクリックして表示されたサンプルを確認し、良かったらUSEボタンをクリック。スタイル等を選んで表示されたGoogle Fonts APIをご自身のサイトに貼り付けるだけで簡単にWebフォントを使用することができます。

Result

See the Pen mPmxKY_css3-font-face_demo2 by Webデザインラボ (@webdlab) on CodePen.

関連リンク

【Labs】手書き風でいい感じなフォントでWebフォント