나눔스퀘어 웹 폰트 적용하기

제목에 잘 어울리는  "나눔 스퀘어"폰트 적용방법을 알아보자.

---

 

 

직접 다운로드 하고 서버에 올려서 사용하는 방법과,

폰트를 불러와서 사용하는 방법이 있다.

 

나눔스퀘어 예시

위 - 기존 일반 나눔스퀘어, 아래 -나눔스퀘어ac 버전

 

옵션

Regular(400), Bold(700), Extra Bold(800), Light(300) 지원이 되고,

ac(R, B, EB, L) 추가 되었다.

 

 

폰트 다운로드

GitHub - moonspam/NanumSquare: 나눔스퀘어 웹폰트 (NanumSquare Webfont)

GitHub - moonspam/NanumSquare: 나눔스퀘어 웹폰트 (NanumSquare Webfont)

 

사용방법

link 방식 (권장)

html 문서 상단 head에 붙여넣기해서 불러오는 방법

/* html */
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css">

 

 

import 방식

css 문서 상단에 붙여넣기해서 불러오는 방법

/* css */
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css);

 

css에서 반영하고 굵기를 지정해서 사용하는 방법을 안내

웹폰트에서는 제공되는 지정된 굵기를 사용해야 폰트가 자연스럽게 굵기가 표현된다.

(굵기는 상단 이미지 참고)

body		{ font-family: 'NanumSquare', sans-serif }
.normal		{ font-weight: 400 }
.bold		{ font-weight: 700 }
.bolder		{ font-weight: 800 }
.light		{ font-weight: 300 }

 

ac폰트

body		{ font-family: 'NanumSquareAc', sans-serif }
.normal		{ font-weight: 400 }
.bold		{ font-weight: 700 }
.bolder		{ font-weight: 800 }
.light		{ font-weight: 300 }

폰트 지정 이름만 다르고, 굵기 사용은 동일하다.

 

 

나눔글꼴 전체 보기

나눔스퀘어 이외에도 여러 글꼴이 있다.

 

네이버 글꼴 모음 (naver.com)

네이버 글꼴 모음

 

라이선스 안내

사용할 때, 라이선스 확인을 잘 하고 사용하도록 권장한다.

 

[네이버 나눔글꼴 라이선스안내] : 네이버 전반 고객센터 (naver.com)

[네이버 나눔글꼴 라이선스안내] : 네이버 전반 고객센터

 

---

이 포스트는 나눔스퀘어에 관한 글이지만,
어느 폰트에도 동일한 방법으로 적용이 가능하다는 점 !!