@font-face 사용법(로컬 폰트파일 사용 방법)

 

일을 하다가 웹폰트로 작업한 css를 파일로 다운하여 사용하기로 변경하여

작업을 했는데 하나도 안먹혀서 멘붕....;;

 

 

 

분명 url도 정확히 들어갔는데 적용이 안되어서

하루종일 머리를 쥐어짰는데...

이유는 @font-face에서 내가 sans-serif도 같이 넣어놔서

자꾸 sans-serif 폰트가 먹힌거 같다...

 

 

 

결국 오후쯤에야 이 사실을 알게되고

넘 허탈...

허무...

 

그치만 이 계기로 font-face 잘 알게되었...ㅋ

(아직 잘 모름)

 

 

 

 

이제부터는 알았으니 실수하지 말자...ㅎㅎ

 

 

 

 

 

로컬에 있는 폰트파일을 css에 지정하는 규칙

@font-face {
font-family: "사용할 폰트 이름 지정(한개만 사용 가능)"; (필수)
src: url("사용할 폰트의 경로 지정") format("폰트포맷"); (필수)
font-weight: 폰트의 두깨 지정; (선택사항)
font-style: 정의하고 싶은 폰트의 스타일 지정; (선택사항)
}

 

 

 

예제

/* font-face 지정방법 */
@font-face {
font-family: "exFont";
src: url('../font/exFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

/* font-family 불러다 쓰는 방법 */
body {
   font-family: "exFont", sans-serif;
}

 

 

♥♥ 혹쉬 제 글에 문제가 있다면...살며시 댓글 남겨주세요ㅎ,ㅎ ♥♥