GAMURATWIST.JP BLOG

ウェブフォントの基本

WebFonts（ウェブフォント）とは、
サーバにアップロードしたフォントファイルを、
ブラウザ上でWebページのテキストに適用できる仕組みのこと。
（Web Designing 2010/4）
  1. フォントファイル（.ttf）を準備　※ライセンス等に注意
  2. サーバにアップロード
  3. スタイルシートでフォントファイルを読み込む（@font-face）
  4. 適用したいHTMLタグにプロパティを設定。
/* フォントファイル（.ttf）を読み込む */
@font-face {
  font-family: 'フォント名';
  src: url('フォントファイルのパス') format('truetype');
}
/* HTMLタグにプロパティ設定 */
h1 { font-family: 'フォント名'; }

モダンブラウザは、TrueType（.ttf）もしくは OpenType（.otf）を読み込める。
Internet Explorer は、Embedded OpenType（.eot）しか読み込めない。
IEにもウェブフォントを使うには、別途 .eot ファイルをアップロードし、以下のように記述する。

@font-face {
  font-family: 'フォント名';
  src: url('###.eot') ; /* for IE */
  src: local('hide IE'),url('###.ttf') format('truetype');
}

この方法で日本語フォントも使いたいところだが、
和文ファイルは、数多くの漢字を含んでいるので容量が大きい。
そのため、読み込みに時間がかかり、表示が遅くなる。
現状では、欧文書体の利用にとどめておくのがベストだろう。

UP