웹마스터 팁

  2. Support
  3. 웹마스터 팁

나눔고딕 웹폰트가 아닌 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 이상

이렇게 쓰세요.

  1. HTML head에 아래를 추가하세요.
     <link rel="stylesheet" type="text/css" href="http://nanumgothic.appspot.com/css" />
  2. 그리고, 사용하고 싶은 곳에서 아래와 같은 CSS 속성을 주세요.
     font-family: 'NanumGothic';
  3. 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경로가

 <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" />


이네요. 일단 두줄다 추가해서 사용하고 있어요..

태그 연관 글
  1. [2017/03/15] 웹마스터 팁 다음 우편번호 5자리 적용 by 뒤늦게입문 *1
  2. [2015/06/05] 묻고답하기 스케치북 모바일 스킨 문의 by Ssami *9
  3. [2015/02/25] 웹마스터 팁 kakao Javascript SDK logout by 컴박살
  4. [2015/02/21] 묻고답하기 카카오 로그인후 로그아웃을 어떻게 해야 할찌 ㅡ.ㅡ; by 컴박살 *3
  5. [2014/06/08] 묻고답하기 바뀐 카카오톡 API 때문에 고생. by 키스투엑스이 *2
, , , 이 게시물을
Profile
헐 대박!
좋아요
목록
목록
제목 글쓴이 날짜
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] file teryboy 2010.10.09
XE에서 설문조사시 비회원 참여하는 방법 있을까요? [1] file hellosamyoo 2010.10.12
이미지 삽입시 아래에 한줄 띄우고 클릭가능하게 하여 편히 입력하게 만들자~ [8] file xemall 2010.10.13
IE6부터 IE9까지 대응하기. [7] 정찬명 2010.10.13
플래시를 이용한 최근게시물 구현 [6] 한그림 2010.10.13
인증메일 때문에 고생하시는 분 참고하세요. [17] 박용식 2010.10.14
페이지 설정, 꼭 이렇게 해두세요 [10] file 老姜君 2010.10.14
에디터에 웹폰트를 추가하여 사용하기 [3] file 하얌이 2010.10.18
게시판에 구글 SyntaxHighlighter 3.0.83(구문강조) 적용하기 - 본문에 코드삽입시 유용 file 으아악. 2010.10.20
큐브리드로 변환후 인덱스 재생성 [1] 카르마 2010.10.22
스팸단어목록 공유 [3] 쁘띠하긔 2010.10.23
Mysql에서 큐브리드로 데이터이전 [3] 카르마 2010.10.23
태그 쓰기