웹폰트 eot, woff 사용하기

ttf 파일을 가지고 웹폰트를 만드는 방법을 소개할게요.

지금껏 개발을 하면서 웹폰트에 대해서는 한번도 관심을 가진적이 없다가

이번에 해야할 일이 생겨서 접하게 되었습니다.

eot 파일은 IE 8 까지 지원을 한다고 합니다.

그 외에 브라우저는 woff를 사용한다고 해요.

그래서 ttf 파일을 eot 파일과 woff로 변환을 하셔야 해요

eot 파일 변환.zip

woff 파일 변환.zip

eot 파일은 ttf 파일을 드래그하여 EOTFAST-1.EXE 파일에 가져다 놓으면 eotf 파일이 생성됩니다.

woff 파일 생성도 같은 방법으로 하시면 됩니다.

이제 생성된 eot, woff 파일을 서버에 올려주세요.

@font-face
    font-family: webseller;
    src:url('/fonts/webseller.eot');
    src:local(※),
    url('/fonts/webseller.woff') format('woff');

font-family 에는 사용하고 싶은 명칭을 쓰시면 됩니다.

추가로 font-weight를 지정하면 해당 굵기의 웹폰트 파일로 연결이 됩니다.

body { font-family: 'webseller';}

이제 해당 태그의 폰트에 이런 방식으로 사용하시면 끝 !

바로 적용이 됩니다.

이 형식은 서버내에 웹 폰트 파일이 있어야 하는데요.

이런 방식이 아닌 다른 서버에 웹폰트를 받으려면 다르게 코딩을 해야합니다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

font-family: 'Nanum Brush Script', cursive;

이렇게요.

https://fonts.google.com/

https://fonts.google.com/earlyaccess

구글 웹 폰트에서 지원하는 한글, 웹 폰트가 참 많이 있어요.

잘 활용해보세요 ^^