웹폰트 적용 방법

Reviews & Design & Swim
About me /Contect/Admin

TISTORY

블로그를 조금 이나마 더 이쁘게 하기 위해서 많은 것들을 신경을 쓰고 많은것들에 변화를 줍니다. 하지만 인터넷이라는 단점은 폰트가 다양하지 못하다는 것이지요.(기본적인 폰트만이 사용가능하죠) 그래서 나온것이 웹폰트입니다. 조금이나마 좋은 폰트는 전체적인 느낌을 좋게만듭니다.

저는 우리글 닷컴의 우리돋음90c1을 사용하고 있습니다.
그럼 웹폰트 적용 방법을 알아보도록 하죠.

CSS 일명 스타일 시트를 적용하지 않고 Html 전체를 적용하는 방법이 있지만 추천하지 않습니다. 자신이 원하는 부분을 따로 설정하는 CSS를 권장합니다.
코드가 뜨지 않는다면 '새로고침' 이나 잠시만 기달려주세요

@font-face{font-family:우리돋음90c1; src:url(./wooriDotum90C1.eot)}
스타일시트 가장 상단에 복사해서 붙여 넣기 해주시면됩니다. 그리고 적용하고 싶은 곳에 아래처럼 적요을 해주면됩니다.
.article {
	width:/*@post-width=*/ 583px /*@*/;
	color:/*@post-body-color=*/ #333 /*@*/;
	font: 10pt 우리돋음90c1;
}
위에 보이시는 샘플은 본문에 해당하는 것입니다. Font 태그 위에 크기와 함께 스타일시트 상단에 복사해 붙여 넣기한 폰트패밀리 이름을 넣어주시면됩니다. 만약 저와 같은 우리글닷컴의 우리돋음90c1 이나 우리돋음90c2 와 같은 condense 된 웹폰트의 경우 웹폰트를 지원하지 않는 파이어폭스나 사파리 웹브라우저 에서 웹폰트가 사용되지 않기 때문에 폰트의 크기가 차이가 많이 나는 경향이 있습니다. 이경우에는 아래의 글을 참조하시기 바랍니다. 



간단하게 여러가지 스타일시트를 이용하여 웹브라우저 마다 스타일시트를 지정해 주어 브라우저 별 최적화를 해주는 방법입니다. 익스6.0에서 잘보이던 블로그가 잘 보이지 않고 7.0에서 잘 보인다던가 하는 그런 문제점을 찾아 해결할수 있습니다.

연관있는 콘텐츠