제목에 잘 어울리는 "나눔 스퀘어"폰트 적용방법을 알아보자.
직접 다운로드 하고 서버에 올려서 사용하는 방법과,
폰트를 불러와서 사용하는 방법이 있다.
위 - 기존 일반 나눔스퀘어, 아래 -나눔스퀘어ac 버전
옵션
Regular(400), Bold(700), Extra Bold(800), Light(300) 지원이 되고,
ac(R, B, EB, L) 추가 되었다.
폰트 다운로드
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)
이 포스트는 나눔스퀘어에 관한 글이지만,
어느 폰트에도 동일한 방법으로 적용이 가능하다는 점 !!
반응형