[デザイン]フォントを一括指定する - ち

何がどう

ウェブにあるフリーフォントを使用したい。

どうするのか

CSS内に使用したいフォント情報を記述する。

どうかくのか

@font-face {

 font-family: 'foo';
 src: url('foo') format('woff');

}

くわしく

font-family:'foo';

使用したいフォント名をfoo部分に代入。

src: url('foo')

ウェブにあるフリーフォントを使用するため、ソースファイルを指定する必要がある。
また、ローカルにフォントファイルが存在する場合は、

src:local('foo')

の記述でOK。

format("woff")

フォントをインストールせずに、webフォントを使用する時に記述する。

IE8以下での記述

下記のGraublauWeb.eot以下を追記する必要がある。
IE8以下のブラウザではGraublauWeb.eotは無視されるので記述上の問題は発生しない。

@font-face {

 font-family: 'Graublau Web';
 src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');

}

引用元

【css】Webフォント、ローカルフォントの指定方法