웹마스터 팁

웹 폰트란 웹 제작자가 의도한 글꼴을 사용자 브라우저 화면에 그대로 표시하기 위해 사용하는 웹용 글꼴을 말합니다. 로컬 PC에 미려한 글꼴이 없는 경우 브라우저는 웹 서버에서 즉시 제작자가 올려둔 글꼴을 내려받아 사용자에게 표시하는 것이죠. 예쁘지만 사용자도 모르는 사이에 웹 서버에 있는 글꼴을 내려받아야 하기 때문에 성능과 타협해야 합니다. 느린 웹 사이트에는 권장하지 않습니다.

Step 1

나눔고딕 웹 폰트를 사용하려면 일단 나눔고딕 글꼴이 여러분의 웹 서버에 올라가 있어야 합니다. 아래 제공하는 파일 가운데 woff 포멧과 eot 포멧을 내려받아 서버에 올려놓으세요. woff(Web Open Font Format) 포멧은 W3C 권고 표준이고 파이어폭스, 사파리, 오페라, 크롬, IE 9 브라우저가 지원하고 있지만 IE 6~8 브라우저가 지원하지 않습니다. 한편 IE 6~8 브라우저는 eot(Embeded Open Type) 포멧만을 지원하고 다른 브라우저들은 eot 포멧을 지원하지 않죠. 그래서 브라우저 호환성을 확보하려면 woff, eot 포멧이 모두 필요합니다. 


NanumGothic.woff(982KB)  

NanumGothic.eot(745KB)  

NanumGothic.ttf(2.23MB) // 이것도 웹 폰트로 사용은 할 수 있어요. 하지만 너무 무겁죠? 다운받지 마세요. 비추.


Step 2

CSS 파일에서 다음과 같이 @font-face 선언을 합니다. font-family 이름을 사용자 정의 하고 글꼴의 경로 url(...)을 바르게 작성합니다. 글꼴 경로는 CSS 문서가 글꼴 파일을 바라보는 관점에서 경로를 작성하면 됩니다. 아래는 CSS 파일과 글꼴이 같은 디렉토리에 있는 상황이라 간주하고 경로를 작성한 겁니다.


@font-face{font-family:NG;src:url(NanumGothic.eot);src:local(※),url(NanumGothic.woff) format('woff')}


그 다음 어떤 요소에 글꼴을 적용할 것인지 선언해야 합니다. body, input, textarea, select, button 이런 요소에 두루 글꼴을 적용할께요. body에만 적용하면 table, input, textarea, select, button 요소에 글꼴 상속이 안되서 전부 줄줄이 적은겁니다. 


body, table, input, textarea, select, button{font-family:나눔고딕, NG, sans-serif}


NanumGothic 이라는 글꼴을 앞쪽에 선언하면 사용자 로컬 PC에서 NanumGothic 글꼴이 이미 설치되어 있는지 확인해 보고 이미 설치된 것으로 확인되면 woff, eot 포멧 글꼴은 아예 다운로드 하지 않고 시스템 글꼴로 등록된 NanumGothic을 사용해서 글꼴을 렌더링 합니다. 만약 NanumGothic 글꼴이 로컬 PC에 없는 경우 woff, eot 글꼴을 내려받기 해서 렌더링 합니다.


뭐 별거 없죠? ^^

제목 글쓴이 날짜
프리 반응형 템플릿(html/css/js) 다운받을 수 있는 곳 [1] jhsongsh 2014.10.28
즐겨찾기 소스 - 파비콘등록 soroweb 2015.04.16
누리고 쇼핑몰 상품취소 혹은 반품시 마일리지 자동회복하기 [6] garnecia 2015.01.21
확장변수에 시분초 추가하기 [1] file 해떨 2015.04.15
JS로 IE 6,7,8 구분하기 [4] 키스투엑스이 2015.04.14
|웹폰트(네이버 맑은 고딕, 나눔고딕) 적용하기 [1] 다큰왕자 2014.03.18
나눔고딕 웹 폰트 적용하기. [10] 정찬명 2011.12.15
에디터에서 URL 클릭시 "http://" 삭제하는 방법 [2] 콜롬보. 2015.03.13
통합검색 사용 가부 설정 및 특정 그룹만 사용가능하게 제한 설정 기능 추가 - 보안이슈가 될 수 있는 부분 [1] sejin7940 2015.04.10
요청한 기능을 실행할 수 있는 권한이 없습니다. - 오류해결 file I-JEX 2015.04.10
댓글 새로고침 수정 [22] Lansi 2013.09.06
메인 로고 및 메인 이미지 변경 방법 [1] file okcashbag042 2015.04.08
웹 재요청 방지 및 트래픽 감소를 위한 방법 마루디자인 2015.04.06
setModule() 오류 발생시 qkrcjfgus33 2015.04.04
ie11에서 통합검색시 page가 바뀌면 검색키워드가 없어지거나 이상한 글자로 바뀌는 것에 대한 팁 garnecia 2015.04.03
[고급] 내 XE 모듈에 editor 삽입하기 [8] 개발해보쟈 2013.01.22
스케치북게시판 최신버전에 네이트온 /마이피플/플립보드 추가하는 방법 [4] file 가을풍경 2015.03.09
로고 만들기 귀찮을때^^* [1] 수백 2015.03.06
[스케치북5] 댓글 수정 간략화하기.. (새로고침 없이 하는 방법 추가) [16] file XE만세 2014.01.05
php 5.6에서 인증메일 SMTP 연결에 실패할때.. file 루비스코 2015.03.31