Webフォントで複数のウェイトやスタイルを持つ書体を定義する

Webフォントの設定

@font-faceでフォントを指定する時、font-familyを同じ名前にして、font-weightとfont-normalを使用するフォントに合わせる。

/*medium*/
@font-face {
    font-family: 'myfont';
    src: url('fonts/myfont-medium.woff') format('woff'),
             url('fonts/myfont-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
/*light*/
@font-face {
    font-family: 'myfont';
    src: url('fonts/myfont-light.woff') format('woff'),
             url('fonts/myfont-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
/*bold-italic*/
@font-face {
    font-family: 'myfont';
    src: url('fonts/myfont-bold-italic.woff') format('woff'),
             url('fonts/myfont-bold-italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

使う時

font-familyを上記で指定したフォント名にして、font-weightやfont-styleの値を適時指定する。

/*myfont-mediumを指定する*/
.hoge{
    font-family: 'myfont';
    font-weight: 500;
}

/*myfont-lightを指定する*/
.foo{
    font-family: 'myfont';
    font-weight: 300;
}

/*myfont-blold-italicを指定する*/
.bar{
    font-family: 'myfont';
    font-weight:700;
    font-style: italic;
}

備考

font-weightはnormalかbold、または100〜900の数値で指定する。
数値とウェイトの関係は以下のとおり。

数値	ウェイト
100	Thin (Hairline)
200	Extra Light (Ultra Light)
300	Light
400	Normal
500	Medium
600	Semi Bold (Demi Bold)
700	Bold
800	Extra Bold (Ultra Bold)
900	Black (Heavy)

※下記サイトを参考にしてる
font-weight - CSS | MDN