나눔스퀘어 폰트 다운로드 · 설치 · 활용 가이드
NanumSquare & NanumSquare Neo — 문서·웹·모바일까지 한 번에 끝내는 사용법 ✅
이 글은 나눔스퀘어 및 나눔스퀘어 네오를 블로그/문서/웹사이트/모바일 앱에서 깔끔하게 쓰는 방법을 가장 쉬운 단계로 정리했습니다. 아래 다운로드 버튼으로 안전하게 내려받고, 운영체제별 설치법과 웹폰트 적용, 앱 포함 방법까지 순서대로 따라오세요 ✨
🧩 나눔스퀘어 한눈에 보기
나눔스퀘어는 또렷한 본문/UI용 한국어 서체로 널리 쓰입니다.
최신 계열인 나눔스퀘어 네오는 화면 가독성과 글자 폭 균형이 개선되어
블로그·웹서비스·모바일 앱에 적합해요. 굵기(Weight)도 Light/Regular/Bold/ExtraBold 등 다양합니다.
- 🧼 깔끔한 화면 가독성
- 🧱 다양한 굵기(문장/제목/버튼에 맞춤)
- 🔤 웹폰트/CDN/앱 포함 모두 지원
📜 라이선스 요약
개인/기업 상업적 사용 가능합니다. 폰트 파일 자체를 유료로 판매하는 행위는 금지되며, 프로젝트에 포함/배포는 허용됩니다. 상세 조항은 위 공식 다운로드 페이지에서 반드시 확인하세요.
- ✅ 상업적 사용 OK
- ✅ 앱/웹/인쇄 포함 배포 OK
- 🚫 폰트 자체 유료 판매는 NO
💻 PC 설치 (Windows/macOS)
아래는 초보자도 따라 하기 쉬운 3단계입니다.
Windows
- 압축파일을 내려받아 모두 해제합니다.
.ttf또는.otf파일을 더블클릭 → 설치 버튼을 누릅니다.
(여러 파일을 한 번에: 선택 → 마우스 오른쪽 → 설치)- 워드/한글/포토샵 등 앱을 재시작하고 글꼴 목록에서 NanumSquare 또는 NanumSquare Neo를 선택합니다.
macOS
- 압축 해제 후
.ttf/.otf를 더블클릭합니다. - 자동으로 열리는 서체 관리자(Font Book)에서 설치를 클릭합니다.
- Pages/Keynote/브라우저/디자인 툴을 재실행합니다.
💡 여러 사용자 계정에서 공통 사용하려면 Windows의 경우
C:\Windows\Fonts 폴더로 드래그,
macOS는 컴퓨터에 설치를 선택하면 됩니다.
🌍 웹폰트 적용 (CDN / 직접 호스팅)
① 가장 쉬운 방법: CDN 1줄
HTML의 <head>에 아래 1줄을 넣고, font-family만 지정하면 즉시 적용돼요.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-nanum-square-neo@0.0.6/index.css">
<style> body { font-family: 'NanumSquareNeo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } </style>
② 직접 호스팅(@font-face)
폰트 파일(권장: .woff2)을 /fonts/ 폴더에 올리고 CSS에 등록합니다.
@font-face {
font-family: 'NanumSquare';
src: url('/fonts/NanumSquare-Regular.woff2') format('woff2'),
url('/fonts/NanumSquare-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
body { font-family: 'NanumSquare', system-ui, sans-serif; }
- ⚡ 속도: WOFF2 우선,
font-display: swap;으로 FOUT 최소화 - 🧱 가중치 세트: Regular(400) + Bold(700)만 먼저 적용 후 필요 시 확장
📱 모바일(앱/모바일웹)에서 사용
Android (앱 번들 포함)
app/src/main/res/font/폴더에nanumsquare_*.ttf복사- 필요하면 폰트 패밀리 XML 생성:
<font-family xmlns:android="http://schemas.android.com/apk/res/android">
<font android:fontStyle="normal" android:fontWeight="400" android:font="@font/nanumsquare_regular"/>
<font android:fontStyle="normal" android:fontWeight="700" android:font="@font/nanumsquare_bold"/>
</font-family>
// Kotlin
textView.typeface = ResourcesCompat.getFont(context, R.font.nanumsquare_regular)iOS (앱 번들 포함)
.ttf/.otf를 프로젝트에 추가(“Copy items if needed” 체크)Info.plist→ Fonts provided by application에 파일명 등록- 코드에서 호출:
// Swift
label.font = UIFont(name: "NanumSquareOTF", size: 16)모바일 웹
위 CDN 또는 @font-face 그대로 동작합니다. 3G/저사양 기기 배려를 위해 WOFF2 + 2개 굵기부터 적용을 추천합니다.
📝 블로그스팟(Blogger) 적용 방법
방법 A) 게시글에서만 적용 (가장 쉬움)
- 새 글 → HTML 보기 전환
<head>가 없는 편집기 특성상, 아래 “내장 스타일” 블록을 글 가장 위에 붙여넣기- 본문 작성
<style>
@import url('https://cdn.jsdelivr.net/npm/typeface-nanum-square-neo@0.0.6/index.css');
.nanumsquare-guide, .post-body { font-family: 'NanumSquareNeo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
</style>방법 B) 블로그 전체에 적용
- Blogger 대시보드 → 테마 → 커스터마이즈 → 고급 → 추가 CSS
- 아래 CSS를 추가 저장
@import url('https://cdn.jsdelivr.net/npm/typeface-nanum-square-neo@0.0.6/index.css');
body { font-family: 'NanumSquareNeo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }🧠 자주 묻는 팁 & 최적화
- 🧬 네오 vs 기존: 신규 프로젝트는 네오 권장(가독/폭 균형).
- 🪶 용량 최적화: Regular+Bold만 우선, 필요 시 Light/ExtraBold 추가.
- 🌐 다국어 폴백: 영문/이모지용 시스템 폰트 함께 지정(
system-ui, -apple-system, Segoe UI, Roboto, Noto Color Emoji등). - 🖨️ 인쇄: 본문은 Regular, 소제목 Bold 권장. PDF 내보내기 전 문단 줄간격 체크.
🛠️ 문제 해결
글꼴이 목록에 안 보여요 😥
- PC: 설치 후 앱을 완전히 종료하고 재실행
- macOS: Font Book에서 유효성 검사 후 활성화 확인
- 웹: CDN 주소/오타, 콘솔 오류(네트워크 차단) 확인
웹에서 로딩이 느려요 🐢
font-display: swap;사용- 필요한 굵기만 서빙
- 직접 호스팅 시 HTTP/2·캐시 정책 확인