웹마스터 팁

웹 폰트란 웹 제작자가 의도한 글꼴을 사용자 브라우저 화면에 그대로 표시하기 위해 사용하는 웹용 글꼴을 말합니다. 로컬 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 글꼴을 내려받기 해서 렌더링 합니다.


뭐 별거 없죠? ^^

제목 글쓴이 날짜
익명게시판에서 임시저장된 글을 불러와 등록하면 익명처리되지 않고 글쓴이 정보가 기록되는 버그 수정 [1] sejin7940 2015.01.23
팝업모듈에서 jQuery 충돌 해결 - 팝업창이 안뜰때. [5] file 똑디 2013.03.22
xe설치시 퍼미션 문제나 DB엑세스 문제 해결하기 길가던분 2015.05.01
[애매모호]스케치북 게시판을 뭔가 큼직큼직하게 눈에 잘들어오게 바꾸기 [10] socialskyo 2014.01.03
PC에서 모바일화면 보는방법 [2] 빅스타 2015.04.29
스케치북 게시판 추천+등록 버튼 만들기 (수정) [8] file 숭숭군 2012.09.22
양력을 음력으로... [7] pupstar 2001.08.14
[초간단 자바스크립트!] 이미지 드래그하기..~~ [8] ∑Ztxy 2003.11.02
간편 css 압축 Ansi™ 2015.04.21
XE 1.5 이상으로 DB 이전시 일부 DB가 빠질 경우 - 내용추가(0203) [7] sejin7940 2012.02.02
정렬을 사용자정의값으로 한 경우 저장이 안 되는 현상 수정 [1] sejin7940 2015.01.06
프리 반응형 템플릿(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