웹마스터 팁
나눔고딕 웹폰트가 아닌 API로 적용하여 사용해보자!!
2010.10.07 17:01
이 정보는 xeFactory님 께서 알려주신 정보인데, 모두 공유 하면 좋을것 같아서 올리게 되었네요.
물론 제 홈페이지에도 사용하고 있습니다.(http://www.udev.co.kr)
자료의 원본 주소는 http://nanumgothic.appspot.com/ 입니다.
그리고 야간개발팀의 홈페이지의 들어가보닌 나눔고딕말고 다른폰트도 api로 제공해주고 있네요.
나눔고딕 폰트 API를 사용하여
모두에게 나눔고딕을 적용한 웹페이지를 보여주세요.
나눔 고딕은 네이버에서 공개한 클리어타입 글꼴로, 센스있는 디자인으로 여러 웹페이지, 광고문구등 다양한 분야에 사용되고 있습니다.나눔고딕 폰트 API는 웹페이지를 볼 때 나눔고딕 폰트의 설치유무에 상관없이 모든 사용자에게 나눔고딕 폰트로 글자를 볼 수 있게 도와줍니다.
다양한 특징을 가지고 있습니다.
- 쉬운 적용 방법: 아래 예제만 따라하세요!
- 빠른 로딩 속도: 한번 불러오면, 모든 폰트 API 적용사이트에서 다시 로드하지 않습니다.
- 대부분의 주요 브라우저 지원: 사파리, 파이어폭스부터 익터넷 익스플로러까지!
아래 브라우저를 지원합니다.
- Internet Explorer: 6.0 이상
- Firefox: 3.5 이상
- Safari: 3.2 이상
- Google Chrome: 4.0 이상
- Opera: 10 이상
이렇게 쓰세요.
- HTML head에 아래를 추가하세요.
<link rel="stylesheet" type="text/css" href="http://nanumgothic.appspot.com/css" />
- 그리고, 사용하고 싶은 곳에서 아래와 같은 CSS 속성을 주세요.
font-family: 'NanumGothic';
- Bold형 글꼴을 쓰시려면 위 1번 소스 css 주소 뒤에 ?type=bold을 추가해주세요.
아래 예제를 참고하세요.
<html> <head> <link rel="stylesheet" type="text/css" href="http://nanumgothic.appspot.com/css" /> <style> body { font-family: 'NanumGothic', serif; font-size: 48px; } </style> </head> <body> <h1>나눔 고딕 폰트를 이용한 웹페이지</h1> </body> </html>
나눔글꼴 폰트 API는 7학기가 끝난 직후 몸풀기로 야간개발팀의 김재석이 만들었으며, Google App Engine으로 개발하였습니다. 외국 서버라 속도가 느리니, 네이버에서 공식적으로 폰트 API를 지원해주면 좋겠네요. :)
추가사항/ 아래의 본인의 댓글을 본문에 넣었습니다.
흠............이거 쫌 이상하네요. 폰트가 적용이 되었다가 안되었다가... 그리고 위의 예시에서 css경로가 로 되어 있는데, http://fontface.kr/ 에 들어가 확인해보니, 경로가 이네요. 일단 두줄다 추가해서 사용하고 있어요.. <link rel="stylesheet" type="text/css" href="http://nanumgothic.appspot.com/css" />
<link rel="stylesheet" type="text/css" href="http://fontface.kr/NanumGothic/css" />
- [2017/03/15] 웹마스터 팁 다음 우편번호 5자리 적용 *1
- [2015/06/05] 묻고답하기 스케치북 모바일 스킨 문의 *9
- [2015/02/25] 웹마스터 팁 kakao Javascript SDK logout
- [2015/02/21] 묻고답하기 카카오 로그인후 로그아웃을 어떻게 해야 할찌 ㅡ.ㅡ; *3
- [2014/06/08] 묻고답하기 바뀐 카카오톡 API 때문에 고생. *2
댓글 10
-
미소둘로
2010.10.07 18:00
-
IE7, 8
Chrome 6.0
Safari 5.0
은 잘됩니다.
파폭에서는 작동에 문제가 있나봅니다.
파폭은 3.0.17인데 폰트가 좀 다르게 나오네요...
-
파폭 3.6.10 에서는 잘 작동합니다.
문서에 보니까 파폭은 3.5이상이네요....ㅋㅋㅋ
-
미소둘로
2010.10.07 18:45
카르마님...카르마님 홈페이지도 파폭 3.6.10에선 나눔고딕이 아니라 궁서체로 보이는데요?
저만 설정이 잘 못 되있는건가요? 헌데 http://nanumgothic.appspot.com/ 요페이지는 정상적으로 보이는데요 ㅡ.,ㅡ; 이상하네요..
-
크롬과 IE8, 파폭을 동시에 켜놓고 있는데 셋다 잘 보입니다.
-
미소둘로
2010.10.07 19:43
혹시 윈도우 기본글꼴에 나눔고딕이 설치 되있나요? 저는 싹 지우고 해보니 궁서체로 보이는거있죠.
아무튼 저만 그런거라면 다행인데 왜 사이트별로 다르게 보일까요?ㅡ.ㅡ
-
그렇네요.
나눔폰트가 설치된 윈7에서는 잘 보이는데 XP에서는 파폭은 최신버전으로 업그레이드해도 궁서체로 보이네요.
XP에서는 http://nanumgothic.appspot.com/ 도 궁서체로 보입니다.
http://fontface.kr/ 에서 보니까 지원브라우저에 파폭은 제외되어있네요.
결론은???
파폭에서는 안된다...ㅋㅋㅋ
-
흠............이거 쫌 이상하네요. 폰트가 적용이 되었다가 안되었다가...
그리고 위의 예시에서 css경로가
<link rel="stylesheet" type="text/css" href="http://nanumgothic.appspot.com/css" />
로 되어 있는데, http://fontface.kr/ 에 들어가 확인해보니, 경로가
<link rel="stylesheet" type="text/css" href="http://fontface.kr/NanumGothic/css" />
이네요. 일단 두줄다 추가해서 사용하고 있어요..
-
hhgyu
2010.10.08 18:36
파이어폭스는 3.6 부터 지원하는데 eot가 아니라 woff 랍니다
- TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
- EOT fonts for Internet Explorer 4+
- WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
- SVG fonts for iPad and iPhone
-
chohee
2010.10.08 19:23
감사합니다~^^
제목 | 글쓴이 | 날짜 |
---|---|---|
1.5.1에서 파일업로드가 안 되는 분 보세요. [12] | 별님왕자 | 2011.12.07 |
스크립트파일(js)을 하단부에서 불러오게 하기 [1] | Treasurej | 2011.12.09 |
XE관리자 메뉴 활용 방법 ^^
[24]
![]() | 똥똥 | 2011.12.09 |
코어 1.5.1에서 회원정보에 성별아이콘 쓰기
![]() | 늘푸른이 | 2011.12.10 |
코어 1.5.1에서 회원목록에 성별아이콘 쓰기(수정) | 늘푸른이 | 2011.12.10 |
제로보드 xe 쇼핑몰 오늘본 상품 퀵메뉴 만드는 법 알려주세요 | 유유히 | 2011.12.15 |
나눔고딕 웹 폰트 적용하기. [10] | 정찬명 | 2011.12.15 |
계정 용량 측정 소스 (펌)
[1]
![]() | rjsoo | 2011.12.16 |
친절한설명! 자신의홈페이지에 간단히 음악넣기
[10]
![]() | 준봉쿠 | 2011.12.18 |
XE 1.5 이상에서 XE 1.4.5.10 이하 버튼 사용하기
[4]
[1] ![]() | 웹 엔진 | 2011.12.18 |
1.5 업데이트후 블로그스킨, 리스트에서 내용출력안되는분 수정방법 [4] | Xiso | 2011.12.23 |
XE 1.5.1 업그레이드시 조심해야 [1] | 소걸음 | 2011.12.23 |
XE 애드온 개발하기 | 우진홈 | 2011.12.24 |
확정변수 로 프린트 페이지 꾸미기(/print_page.html) | 세상의지배자 | 2011.12.26 |
XE에서 Context의 이해 [3] | 우진홈 | 2011.12.28 |
rewrite rule 예외처리하기 [2] | 대류 | 2012.01.01 |
계정(HDD) 사용량 출력하기 | 대류 | 2012.01.01 |
Mysql DB사용량 출력하기 [4] | 대류 | 2012.01.01 |
현재 트래픽 출력하기 [1] | 대류 | 2012.01.01 |
XE 외부페이지 직접접속 차단 및 다국어 설정팁 [4] | 라르크앙시엘 | 2012.01.01 |
다른곳은 모르겠고 파이어폭스3.6.10인데 안되네요?
님홈페이지 http://www.udev.co.kr도 파폭에선 돋움글꼴로 보여요@@
그리고 http://nanumgothic.appspot.com/ 이페이지는 정상적으로 잘 보입니다..
xe에 적용법을 다르게 해야 하나요?;