웹마스터 팁
나눔고딕 웹 폰트 적용하기.
2011.12.15 22:42
웹 폰트란 웹 제작자가 의도한 글꼴을 사용자 브라우저 화면에 그대로 표시하기 위해 사용하는 웹용 글꼴을 말합니다. 로컬 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.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 글꼴을 내려받기 해서 렌더링 합니다.
뭐 별거 없죠? ^^
댓글 10
-
K.Soma
2011.12.16 01:34
-
순수의시절
2011.12.16 10:00
NanumGothic_eot 요놈 다운로드가 안됩니다.
-
왜만지냐
2011.12.16 11:09
-
좋은 팁 감사합니다.
-
OEZ
2013.05.04 09:09
다른방식입니다 링크주신건 js 로 글자를 덮어 씌어서 폰트처럼 보이게하는거고
정찬명님이 알려주신방법은 폰트파일을 서버에 업로드해 폰트가 없는 유저에게 다운받게 하여 적용시키는 방법입니다.
둘다 장단점이 있으니 그건 알아서..^^
-
김낙지
2013.05.02 13:38
웹 서버에 올린다는 말이 무슨 말인가요?
-
CKEQ
2013.05.02 18:27
홈페이지 파일이 있는곳에 FTP로 해당파일을 업로드하라는 얘기입니다. 구글에서 제공하는 나눔고딕 웹폰트 방식이 저한테는 좀 편리하더군요.
http://www.onumedia.co.kr/2012/10/구글-웹폰트-나눔고딕-사이트에-적용하기/
-
김낙지
2013.05.04 00:31
위에서 말씀하신 css 파일은 어디에 있는 앤가요? css파일이 만약에 a 라는 폴더에 있다면 위의 woff 파일과 eot 파일도 같은 a 폴더 안에 업로드 하면 되는 건가요?
ㅠㅠ.. 무지해서 죄송합니다..
-
멧
2015.04.14 09:01
글꼴을 업로드할 위치,
적용해야되는 CSS파일의 위치
위의 두가지를 자세히 써주셨더라면 초보자도 쉽게 적용할텐데 아쉬움이 있네요...
제목 | 글쓴이 | 날짜 |
---|---|---|
IE를 제외한 브라우저에서 첨부파일이 100%에서 사라지는 증세의 해결 [2] | 비나무 | 2010.10.03 |
PHP 5.3.X 버전 사용자들 중 XE 최신버전의 위젯 생성, 텍스타일 등에서의 에러날 때... | 비나무 | 2010.10.03 |
1.4.4.1 업데이트이후 이미지가 엑스박스로 뜨는 분들 참고 [1] | 위드파트너 | 2010.10.04 |
크로스 브라우징을 위한 css 초기화 [2] | hhgyu | 2010.10.05 |
큰 사이즈의 이미지 업로드시 섬네일 생성이 안되어 오류 발생하는 문제 예방법 | 도라란 | 2010.10.05 |
광고성 글때문에.... 금지 ip 목록 공유 [5] | 한니발2 | 2010.10.06 |
댓글을 리스트에 출력하기 [1] | 김성걸310 | 2010.10.07 |
나눔고딕 웹폰트가 아닌 API로 적용하여 사용해보자!! [10] | 으아악. | 2010.10.07 |
카페24 외부페이지로 트래픽 확인하기
[1]
![]() | teryboy | 2010.10.09 |
XE에서 설문조사시 비회원 참여하는 방법 있을까요?
[1]
![]() | hellosamyoo | 2010.10.12 |
이미지 삽입시 아래에 한줄 띄우고 클릭가능하게 하여 편히 입력하게 만들자~
[8]
![]() | xemall | 2010.10.13 |
IE6부터 IE9까지 대응하기. [7] | 정찬명 | 2010.10.13 |
플래시를 이용한 최근게시물 구현 [6] | 한그림 | 2010.10.13 |
인증메일 때문에 고생하시는 분 참고하세요. [17] | 박용식 | 2010.10.14 |
페이지 설정, 꼭 이렇게 해두세요
[10]
![]() | 老姜君 | 2010.10.14 |
에디터에 웹폰트를 추가하여 사용하기
[3]
![]() | 하얌이 | 2010.10.18 |
게시판에 구글 SyntaxHighlighter 3.0.83(구문강조) 적용하기 - 본문에 코드삽입시 유용
![]() | 으아악. | 2010.10.20 |
큐브리드로 변환후 인덱스 재생성 [1] | 카르마 | 2010.10.22 |
스팸단어목록 공유 [3] | 쁘띠하긔 | 2010.10.23 |
Mysql에서 큐브리드로 데이터이전 [3] | 카르마 | 2010.10.23 |
오호.... 애드온형식으로 만들어도 되겠죠??