사이트 로딩 속도 저하를 막기 위해서 웹폰트를 설치하지 않으려고 했으나, 미련을 버리지 못하고 가독성 좋은 웹폰트를 찾아다니던 중 나눔스퀘어네오 폰트를 발견했습니다. 현재 이 블로그에 적용이 되어 있고요. 맥 컴퓨터와 윈도우 컴퓨터 둘 다 확인을 해봤을 때, 획 뭉침이 전혀 없어서 매우 만족 중입니다.
가독성 좋은 웹폰트
나눔스퀘어네오 폰트는 네이버에서 개발한 폰트로 2022년 한글날을 맞이하여 산돌과 함께 출시한 폰트입니다. 나눔스퀘어 폰트의 후속작이라고 할 수있죠. 나눔스퀘어네오 폰트의 특징은 다음과 같습니다.
- 균형잡힌 글꼴 비율로 높은 가독성
- Regular, Bold, ExtraBold, Light, Thin 등 5가지 굵기가 제공
- 한가지 폰트 내에서 여러가지 스타일 변형이 가능한 가변 글꼴 제공
- 무료 라이센스로 상업적, 비상업적으로 자유롭게 사용 가능
나눔스퀘어네오 woff2 파일 다운로드
2400자 정도의 서브셋으로 경량화했습니다. 지금 제 사이트에 적용한 폰트이고 맞춤법 준수하는 웹사이트에서는 문제없이 표시될 것입니다. 아래 버튼을 눌러 다운로드하세요.
설정 방법
네이버 제공 링크 태그로 적용
나눔스퀘어네오 웹폰트 설정 방법은 네이버 글꼴 페이지에서 제공을 하고 있습니다. 아래 버튼을 누르고 나눔스퀘어네오 폰트를 클릭하면 설정 방법을 확인할 수 있는데 웹폰트를 불러오는 방법은 아주 간단합니다.
① HTML 코드 <head> 다음에 위치하도록 아래 코드를 삽입한 다음,
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css" rel="stylesheet">
② 아래와 같이 웹폰트를 표시하고 싶은 곳에 나눔스퀘어네오 폰트를 적용합니다. 아래 코드는 사이트 전체에 적용할 때의 코드입니다.
body {font-family: 'Nanum Square Neo', sans-serif;}로컬에 저장하여 적용
웹폰트를 로컬에 저장하여 불러오는 방식에는 여러 가지 장점이 있습니다. 빠른 로딩 속도로 사용자 경험을 향상시킬 수 있고 브라우저 캐싱을 통해 재방문 시 빠르게 불러올 수 있어 서버 부하를 줄여 방문자에게 더 빨리 표시할 수 있게 됩니다. 또 서브셋을 만들어 경량 폰트를 적용할 수 있다는 것이 큰 장점인데요. 나눔스퀘어네오 폰트를 서브셋으로 경량화하니 110KB 정도로 이미지 하나 크기의 사이즈라 트래픽 부담없이 사용할 수 있습니다.
로컬에 저장한 폰트를 불러오는 방식은 다음과 같습니다.
① 먼저, 웹폰트를 로컬에 업로드한 후
@font-face {
font-family: 'NanumSquareNeo';
src: url('/fonts/NanumSquareNeo-Regular.woff2') format('woff2'),
url('/fonts/NanumSquareNeo-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'NanumSquareNeo';
src: url('/fonts/NanumSquareNeo-Bold.woff2') format('woff2'),
url('/fonts/NanumSquareNeo-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
body {font-family: 'NanumSquareNeo', sans-serif;}
② 위와 같이 코드를 작성하여 CSS 파일에 삽입하면 끝입니다! 밑줄 표시된 부분은 웹폰트를 업로드한 경로로 바꿔 주세요!
나눔스퀘어네오 적용 후기
한글뿐 아니라 영문과 숫자 특수기호도 동글동글하면서도 네모진 모양이 귀엽기도 하고 무엇보다 윈도우 환경에서 매우 깨끗하게 보인다는 것이 가장 큰 장점입니다. 단, 서브셋으로 변환을 하면 가변 글꼴의 특성을 잃어 글자의 굵기가 제대로 표현되지 않았습니다. (제가 변환을 잘 못한 것일 수도 있지만..) 가변 특성을 유지한 채 전체 글자를 웹폰트로 변환하여 사용하는 것도 가능하지만 폰트 파일의 용량이 너무 커지고 세세한 사이즈의 폰트가 꼭 필요한 것은 아니기 때문에 서브셋 경량 버전도 상당히 만족스럽습니다.
가독성 좋은 웹폰트가 필요하다면 나눔스퀘어네오를 고려해 보세요!
안녕하세요. woff 웹폰트를 다운로드 후 적용하려고 하는데 공식사이트에서는 해당 포맷 파일이 없어 찾던 중에 들어오게 되었습니다. 올려주신 파일의 출처가 어떻게 될까요?
안녕하세요!
https://campaign.naver.com/nanumsquare_neo/#download
여기에서 다운로드 받을 수 있어요!
안녕하세요. woff 웹폰트를 다운로드 후 적용하려고 하는데 공식사이트에서는 해당 포맷 파일이 없어 찾던 중에 들어오게 되었습니다. 올려주신 파일의 출처가 어떻게 될까요?