@font-face에 나눔고딕을 써보자-updated
Written on 2010.06.16, 5:22 pm by jay / 4 Comments
오늘 나눔글꼴이 OFL(Open Font License)로 라이선스로 변경되었다는 글을 보고 웹폰트로 적용하는 법과 변환폰트를 올려본다을 설명드립니다.
브라우저 호환성과 폰트변환 오류때문에 수정된 글입니다.
아래소스는 웹폰트변경툴인 @font-face Generator로 만들어진 소스기준으로 설명드립니다.
일단 웹폰트는 css에 다음과 같이 지정해준다.
@font-face {
font-family: 'NanumGothicRegular';
src: url('nanumgothic.eot');
src: local("☺"),
url('nanumgothic.woff') format('woff'),
url('nanumgothic.ttf') format('truetype'),
url('nanumgothic.svg#webfonturzspG4F') format('svg');
}
@font-face {
font-family: 'NanumGothicBold';
src: url('nanumgothicbold.eot');
src: local("☺"),
url('nanumgothicbold.woff') format('woff'),
url('nanumgothicbold.ttf') format('truetype'),
url('nanumgothicbold.svg#webfontqaHEB3q2') format('svg');
}이제 이 폰트를 사용하고 싶은 부분에 font-family를 지정해준다
body {
font-family: "NanumGothicRegular", 대체폰트, sans-serif;
}
strong {
font-family: "NanumGothicBold", 대체폰트, sans-serif;
}위와 같이 하면 본문은 나눔고딕으로, strong태그는 나눔고딕 Bold로 나오게된다.
유의할점
Bold체를 위해서font-family에NanumGothic Bold를 따로 선언하지않고 같은이름에font-weight로만 지정해준다font-weight나 font-style로 표현할 경우 ie와의 호환성 문제가 생긴다고 합니다.- 로컬폰트를 사용할 수 있게
src: local('폰트이름'), local('postscript이름')에 맞춰 지정하게 되어있지만 맥에서 한글같은 2바이트 폰트이름의 문제때문에 ☺같은 특수문자로 대체합니다. - svg폰트의
#xxx부분은 svg폰트로 변환시에 지정되는 id입니다.
css와 font 다운로드 (용량문제와 재변환시간문제로 삭제합니다.)
@font-face Generator에서 폰트업로드후 expert옵션의 subsetting에서 어떤 캐릭터셋인지, 어떤 캐릭터를 포함할건지를 선택후 변환하시면 됩니다.
자신의 서버가 폰트파일을 허용하지 않을때에는 css option에서 base64인코딩을 선택하시면 됩니다.
style linking을 체크하시면 유의사항1에서 말씀드린 문제를 겪게 됩니다.
