브라우저별 사용자 폰트 적용하기

브라우저별 사용자 폰트 적용하기

얼마전 부터 티스토리 블로그를 시작하면서 꾸미기에 한창 열을 올리고 있다. 옛날에 CSS를 잠시 해봤었는데, 기억이 가물 가물 해서 주위사람들에게도 물어 보고해서 이제는 어느정도 내가 원하는대로 꾸밀 수 있게 되었다. 

웹이든, 앱이든 모든것의 기본은 폰트다. 폰트하나로 하늘과 땅차이의 디자인을 느낄 수 있다.

그래서 기본인 고딕체를 버리고 나눔고딕을 선택 했다. 나눔고딕을 선택한 이유는 일단 무료다. Rix, 윤디자인체들이 이쁘지만 웹폰트지원안하는 경우도 있고, 라이센스가 비싸다. 

IE의 경우 옛날부터 커스텀 폰트를 사용하는 법을 알았는데, 사파리나, 크롬, 파이어폭스는 안먹히는것이다.

자료를 좀 찾아 보니 브라우저별로 폰트적용하는 CSS들이 다르다는 것을 알았다.

아래는 브라우저별로 다르게 font-face를 적용한 css이다.

/* 사파리 */
@font-face { font-family:'NanumGothicWeb'; font-style:normal; font-weight:400; 
src: url('./images/NanumGothicCompact.ttf') format('truetype');}

/* 크롬, 파이어폭스 */
@font-face { font-family:'NanumGothicWeb'; font-style:normal; font-weight:400; 
src: url('./images/NanumGothic.woff') format('woff');}

/* IE */
@font-face {font-family:나눔고딕;
src:local('나눔고딕'), url(./images/NanumGothic.eot) format('truetype');};

브라우저별로 지원하는 포멧이 다르다.

사파리 TTF

크롬, 파이어폭스 WOFF

인터넷익스플로러 EOT

한가지 팁을 준다면 나눔고딕 폰트를 포멧별로 호스팅해주는 사이트가 있으니 직접 서버에 업로드 할 필요 없이 쓸 수 있으니 참고하자.

http://api.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.ttf

http://webfonts-cdn.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.woff