나눔고딕 WebFont 적용

 

나눔고딕 웹폰트 작용하기

 

티스토리에 나눔고딕 웹폰트 적용하는 방법 설명해드립니다.

글꼴 다운로드 및 서버에 업로드하기

 

• 첨부한 나눔고딕 웹폰트 다운로드 합니다.

 

---

nanum-gothic-v17-latin.zip

0.10MB

(google-webfonts-helpe 사이트에서 다운로드 했습니다.)

---

•  다운로드한 압축 파일 해제 후, 폰트 파일 업로드 합니다.( 티스토리 기준: [스킨편집] -> [파일업로드])

압축해제 후 4개 파일 업로드

CSS에 코드 작성

티스토리 기준

[스킨편집] -> [Html 편집] -> [CSS]에서 맨 첫번째 줄에 다음과 같이 코드 추가 합니다.

/* nanum-gothic-regular - latin */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('./images/nanum-gothic-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('NanumGothic'),
       url('./images/nanum-gothic-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./images/nanum-gothic-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./images/nanum-gothic-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./images/nanum-gothic-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./images/nanum-gothic-v17-latin-regular.svg#NanumGothic') format('svg'); /* Legacy iOS */
}

---

나눔고딕웹포트_CSS.txt

0.00MB

*TXT파일에 적용할 CSS코드 넣어 드립니다.

---

 

글꼴 사용하기

• CSS에서 font-family를 찾아 "Nanum Gothic"로 변경 합니다.

참고 사이트

https://google-webfonts-helper.herokuapp.com/fonts/nanum-gothic

google webfonts helper