매뉴얼

기타 웹사이트에 나눔고딕 폰트 적용하기

Anybuild
2015-12-07 15:21:00
hit10717
http://lab.anybuild.co.kr/bbs/faq/5070

웹사이트에 윈도우에서 지원하는 기본폰트 (굴림,돋움,바탕 등....)가 아닌 다른 폰트를 적용하고 싶은 경우, 해당하는 폰트파일을 업로드하여 추가해야 합니다.

다음을 따라하시면 간단히 나눔고딕 폰트를 적용하실 수 있습니다.

1. 첨부된 파일을 다운받아서 압축을 해제합니다.

2. FTP에 접속하여 'font' 폴더를 생성 후, 해당 폴더에 파일을 업로드 합니다.

3. 사이트에 적용되어있는 css 최상단에 다음을 추가 합니다.



/* Nanum Gothic Font */

@font-face {

  font-family: 'Nanum Gothic';

  font-style: normal;

  font-weight: 400;

  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.eot');

  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.eot?#iefix') format('embedded-opentype'),

       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.woff2') format('woff2'),

       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.woff') format('woff'),

       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.ttf') format('truetype');

}

@font-face {

  font-family: 'Nanum Gothic';

  font-style: normal;

  font-weight: 700;

  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.eot');

  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.eot?#iefix') format('embedded-opentype'),

       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.woff2') format('woff2'),

       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.woff') format('woff'),

       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.ttf') format('truetype');

}

@font-face {

  font-family: 'Nanum Gothic';

  font-style: normal;

  font-weight: 800;

  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.eot');

  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.eot?#iefix') format('embedded-opentype'),

       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.woff2') format('woff2'),

       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.woff') format('woff'),

       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.ttf') format('truetype');

}

body {font-family:'Nanum Gothic';}

예시에는 body 에 font-fmily 를 적용하여 사이트 전체에 나눔고딕이 적용되었습니다.

특정 클래스에만 나눔고딕 폰트를 적용하고 싶으시면, 다음과 같이 추가해주세요.

 .class명 {font-family:'Nanum Gothic';}

게시글 공유 URL복사 Twitter Facebook

출력

nanumgothic.zip 10,392,585byte

댓글작성

열기 닫기

prev 이전글: [오픈마켓] 기본 설정 방법

next 다음글: APP 에서 인트로 화면이 빨리 닫히게 하는 방법 안내 드립니다.

top