@font-faceで複数のweigthやstyleを持つWebフォントを定義する方法

Webフォントを@font-faceを使って指定することはよくあると思いますが、同じフォントで複数のfont-weightやfont-styleがある場合はどうしますか？

たとえば、Webフォントでfont-weigth:nomal;とfont-weigth:bold;の2種類を使い分けたい場合、とりあえず、nomalのフォントだけ@font-faceで指定して、ボールド体はこのnomalフォントにfont-weigth:bold;を指定して表現した場合、思ったような表現にならなかったり、フォントによってはボールドになっていないといったこともあります。

また、もしこの二種類の同名フォン名を、例えば、「exfont-nomal」,「exfont-bold」のようにそれぞれ違うフォント名で指定してしまうと、いちいち長いフォント名を入力しなければならないし、使い勝手は悪くなってしまいます。

そこで、今回はこういった、同じWebフォントで複数のウエイトやスタイルを持つフォントを扱う場合、どういった書き方が一番スマートかというお話です。

フォント名を統一して対応する方法
たくさんのfont-weightを持つWebフォントを指定する場合

フォント名を統一して対応する方法

例えば、exfont-nomal(標準のフォント)、exfont-bold(太文字)、ex-nomal-italic(標準の太さの斜め文字)というwebフォントをフォント名（exfont）としてまとめて指定する場合の@font-faceの記述は次のようになります。

/* nomal */
@font-face {
    font-family: ' exfont ';
    src: url('font/exfont-nomal.woff') format('woff'),
             url('font/exfont-nomal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
/* bold */
@font-face {
    font-family: ' exfont ';
    src: url('font/exfont-bold.woff') format('woff'),
             url('font/exfont-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
/* normal-italic*/
@font-face {
    font-family: ' exfont ';
    src: url('font/ex-nomal-italic.woff') format('woff'),
             url('font/ex-nomal-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* nomal */

@font-face {

font-family: ' exfont ';

src: url('font/exfont-nomal.woff') format('woff'),

url('font/exfont-nomal.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

/* bold */

@font-face {

font-family: ' exfont ';

src: url('font/exfont-bold.woff') format('woff'),

url('font/exfont-bold.ttf') format('truetype');

font-weight: bold;

font-style: normal;

}

/* normal-italic*/

@font-face {

font-family: ' exfont ';

src: url('font/ex-nomal-italic.woff') format('woff'),

url('font/ex-nomal-italic.ttf') format('truetype');

font-weight: normal;

font-style: italic;

}

この記述方法で、font-family: ‘ exfont ‘;　とあとはfont-weightとfont-styleの使い分けだけでそれぞれに適応したWebフォントが反映さえるようになります。

たくさんのfont-weightを持つWebフォントを指定する場合

同じフォントに複数のfont-weightがありそれらをWebフォントとして使いたい場合は数値で指定します。

数値とweightの関係は次の通りです。

100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal (regular)
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

400に指定したフォントが標準（nomal）のフォントになります。