web font

web font 

출처: SUPERJANG http://superjang.com/?p=904

그동안 웹에서 사용가능한 폰트는 사용자의 컴퓨터에 설치되어 있는 폰트에 한정되어 있었습니다.

font-family: 내가좋아하는 폰트명,  두번 째로 좋아하는 폰트명, …. ; 식으로 폰트를 지정해봤자

사용자에 컴퓨터에 없으면 아무 소용이 없었습니다.

그래서 많은 사람들이 이미지로 폰트를 대체했었습니다.

이로인해 접근성이라던지, 데스크탑 브라우저에서 확대했을경우 폰트가 일그러진다던지 모바일의 경우 다른요소들은

다 확대되는데 이미지파일만 원사이즈를 유지하여 의도하지 않은 레이아웃을 보여주는 문제가 생깁니다.

@font-face를 사용하면 기존의 ttf와 같은 폰트를 사용자의 폰트 설치 여부에 상관없이 웹에서도 사용할 수 있게됩니다.

 

@font-face{

font-family:helvetica;

src:url(‘txt/helvetica.ttf’) format(‘truetype’); //src:url(‘폰트경로’) format(‘파일 유형’);

}

h1{

font-family:helvetica;

}

이렇게 하시면 웹에서도 원하는 폰트를 사용하실 수 있습니다.

단 IE에서는 ttf, ote가 아닌 eot확장자 폰트만을 사용할 수 있습니다.

이를위해 아래와 같이 작성하시면 문제없이 이용할 수 있습니다.

 

@font-face{

font-family:helvetica;

src:url(‘txt/helvetica.eot’); //only IE를 위한 css추가

url(‘txt/helvetica.ttf’) format(‘truetype’), //src:url(‘폰트경로’) format(‘파일 유형’); ttf  크롬 파폭 사파리 

url(‘txt/helvetica.woff’) format(‘woff’)//woff 크롬 파폭 사파리

}

ie(9) ff(10.0) safari(5.12) chrome(16)테스트 해보니까 ttf,woff는 크롬,파폭,사파리 에서 eot는 ie에서만 인식을 합니다.

크기는 나눔고딕의경우 eot(608kb), woff(717kb), ttf(1.49mb) 순입니다.

h1{

font-family:helvetica;

}

아래 링크로 가면 이미 많이보유하고 계신 ttf폰트파일을 손쉽게 eot파일로 변환할 수 있습니다.

(압축 해제 후 폴더안의 OETFAST-1.exe 위로 ttf파일을 드래그하면 해당폴더에 자동으로 eot파일이 생성됩니다.)

http://eotfast.com/

 

그리고 다양한 글꼴 사용시에 로딩시간이 길어질 수 있습니다.

사용자의 local에 이미 설치되어있는 글꼴은 local(‘helvetica’)로 확인하면 로딩 시간을 줄일 수 있습니다.

@font-face{

font-family:helvetica;

src:url(‘txt/helvetica.eot’); //IE를 위한 css추가

src:local(‘helvetica’), url(‘txt/helvetica.ttf’) format(‘truetype’); //src:url(‘폰트경로’) format(‘파일 유형’);

}

h1{

font-family:helvetica;

}

 

마지막으로 웹에서 사용전에 라이센스를 꼭 확인하시길 바랍니다.

무료로 배포된 폰트가 아닌 경우는 함부로 사용하지 말아야 합니다.

아래 링크에 가시면 공개된 폰트를 많이 찾을 수 있습니다. *사용전에 라이센스 확인은 필수입니다.

http://webfonts.info

 

http://www.fontsquirrel.com

 

http://www.google.com/webfonts#ChoosePlace:select