CSS font-face 속성으로 같은 패밀리 폰트 여러개 불러오기

font-face 방식으로 폰트이름을 하나로 하고 여러개의 스타일을 표현하기

폰트 불러오기

• 아래와 같이 font-family의 명은 동일하게 한다.
• src파일 마다 weight값을 지정해서 여러개의 @font-face를 작성한다.

@font-face{
font-family: NanumGothic;
src:url(../fonts/NaumGothicL.woff) format('woff');
font-weight:300;
}
@font-face{
font-family: NanumGothic;
src:url(../fonts/NaumGothicR.woff) format('woff');
font-weight:400;
}
@font-face{
font-family: NanumGothic;
src:url(../fonts/NaumGothicB.woff) format('woff');
font-weight:700;
}
@font-face{
font-family: NanumGothic;
src:url(../fonts/NaumGothicEB.woff) format('woff');
font-weight:800;
}

적용하기

• 전체에 한 폰트 패밀리를 적용한다.
• 원하는 weight로 선택자마다 적용한다.

 *{
	font-family: "NanumGothic", sans-serif;
 }
 
 .title{
 	font-weight:800;
}

 .txt{
 	font-weight:500;
}