네이버의 '한글한글아름답게'에서는 여러가지 한글 폰트를 제공하고 있습니다. OTF와 TTF는 물론, 웹 폰트도 갖춰져 있어 웹페이지를 만들 때도 쉽게 활용할 수 있습니다. 이 중 나눔스퀘어 네오를 블로그에 적용하는 예제를 따라가며 사용법을 간략히 정리해 보겠습니다.
기본 정보
한글한글아름답게
https://hangeul.naver.com/font
상기 사이트에 접속하여 아래로 쭉 내려가면, 크게 다음 3가지 글꼴 목록이 표시됩니다.
- 나눔 글꼴 (고딕체 / 산세리프)
- 마루 부리 글꼴 (명조체 / 세리프)
- 클로바 나눔손글씨 (필기체)
이 중 나눔 글꼴로 들어갑시다. 물론, 마루 부리 글꼴과 클로바 나눔손글씨도 웹 폰트가 준비되어 있으니 원하는대로 활용하세요.
나눔 글꼴 목록
여러가지 나눔 글꼴이 표시됩니다. 원하는 문구를 입력하고 크기를 조절하는 등 각 글꼴을 미리 시험해볼 수 있습니다.
나눔스퀘어 네오
나눔 글꼴 목록에서 아래로 쭉 내려가면, 나눔스퀘어 네오를 확인할 수 있습니다.
해당 부분을 클릭하면 오버레이 창이 뜹니다. 참고로 각 폰트란의 오른쪽 아래 다운로드 버튼을 누르면 웹폰트가 아닌 OTF/TTF가 다운로드됩니다. 다운로드 버튼을 피해 클릭합시다.
이 오버레이 창에서 또 스크롤을 내리면, 우리가 찾고 있던 '웹 폰트 URL'과 'CSS font-family 설정' 항목을 확인할 수 있습니다.
사용 방법
가져오기
CSS 파일로 구성되어 있으니 그대로 가져다 사용할 수 있습니다.
① HTML의 head 내에 해당 구문을 그대로 삽입하거나,
<head>
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css" rel="stylesheet">
</head>② 기 사용하는 css가 있다면 해당 css 파일에서 import 하거나
@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css');③ 좀 더 컴팩트하게 원하는 font-face만 선별해 css에 추가할 수도 있습니다.
@font-face {
font-family: 'NanumSquareNeo';
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot);
src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.eot?#iefix) format("embedded-opentype"),
url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff) format("woff"),
url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.ttf) format("truetype");
}적용
필요에 따라 적절히 font-family를 구성합니다.
font-family: 'NanumSquareNeoLight';
font-family: 'NanumSquareNeo';
font-family: 'NanumSquareNeoBold';
font-family: 'NanumSquareNeoExtraBold';
font-family: 'NanumSquareNeoHeavy';영어 글꼴
나눔스퀘어 네오에 라틴 96자가 포함되어 있으니 통합으로 사용해도 무방합니다. 다만, 개인적으로 제목은 좀 더 각이 진게 어울리는 것 같아 'Trebuchet MS'과 함께 사용합니다.
font-family: 'Trebuchet MS', 'NanumSquareNeo', san-serif;위처럼 설정하면 Trebuchet MS이 먼저 적용되나, 해당 글꼴에는 한글이 없으니 한글은 다음으로 넘어가 나눔스퀘어 네오가 적용됩니다. 즉, 영어는 Trebuchet MS, 한글은 나눔스퀘어 네오로 나뉘어 출력됩니다.
참고자료
