# 다국어 지원이 좋은 Noto Sans 웹폰트 적용 방법 (CDN / npm / 직접호스팅 / 주의사항)

안녕하세요 :) 오늘은 많은 분들이 사용하는 Noto Sans KR 폰트 적용 방법을 정리해봤어요.
Google Fonts를 통해 간단히 불러올 수도 있고, npm으로 설치하거나 직접 호스팅할 수도 있습니다.
프로젝트 성격에 따라 선택해서 적용해보세요!

Noto Sans KR

구글·어도비 기반의 오픈소스 산세리프 계열 글꼴로 한글·영문·한자 등 다국어 지원이 좋고 화면 가독성이 뛰어납니다.

웹용으로 널리 쓰이며 여러 굵기(Weights)를 지원하고 있어요.

1. CDN으로 적용하기 (가장 간단한 방법)

jsDelivr (추천)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/googlefonts/noto-sans-kr@latest/css/all.min.css">

위 링크를 <head> 안에 넣으면
**Thin(100)부터 Black(900)**까지 모든 weight를 한 번에 사용할 수 있습니다.

이후 CSS에서 이렇게 지정하면 돼요 👇

body {
  font-family: "Noto Sans KR", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

Google Fonts (공식, 직접 weight 지정 방식)

Google Fonts에서는 모든 굵기를 한꺼번에 불러오려면 아래처럼 weight 범위를 지정하면 됩니다

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

Google Fonts는 네트워크 요청이 많아지는 단점이 있어요.
그래서 프로젝트용으로는 jsDelivr 방식이 조금 더 빠르고 안정적입니다.

2. npm으로 설치해서 적용하기

React나 Vue 같은 프레임워크를 사용할 땐 npm 패키지로 관리하는 게 편합니다.
fontsource 패키지를 이용하면 필요한 굵기만 선택해서 쓸 수 있어요.

# 설치
npm install @fontsource/noto-sans-kr

그다음 JS 또는 CSS 파일에서 아래처럼 불러오면 됩니다.

import "@fontsource/noto-sans-kr/400.css";
import "@fontsource/noto-sans-kr/700.css";

body {
  font-family: "Noto Sans KR", sans-serif;
}

3. 직접 호스팅해서 적용하기

서버에 폰트 파일을 직접 올려 사용하는 방법입니다.
프로젝트 보안 정책상 외부 CDN 사용이 어렵거나, 폰트를 커스터마이징하고 싶을 때 유용해요.

먼저 Google Fonts에서 원하는 굵기의 woff2 파일을 다운로드한 뒤 /fonts/ 폴더에 저장하세요.

그다음 CSS에 아래처럼 추가합니다 👇

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/NotoSansKR-Regular.woff2") format("woff2"),
       url("/fonts/NotoSansKR-Regular.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/NotoSansKR-Bold.woff2") format("woff2");
}

body {
  font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

tip : woff2 파일은 압축률이 높고 브라우저 호환성도 좋아서 권장됩니다.
font-display: swap 속성으로 폰트 로딩 시 깜빡임을 최소화하세요.

4. 적용 시 주의사항

용량 이슈 : 한글 폰트는 파일 크기가 큰 편이에요.
필요한 굵기만 불러오거나, 자주 쓰는 글자만 포함된 서브셋 버전을 사용하는 게 좋아요.
Fallback 폰트 지정 : "Noto Sans KR", system-ui, sans-serif 순으로 설정해두면
폰트 로딩이 느릴 때도 기본 폰트로 자연스럽게 표시됩니다.
가변 폰트(Variable Font) : 최근엔 weight 범위를 유연하게 조절할 수 있는
가변 버전도 제공되고 있으니, 최신 브라우저 환경이라면 활용해보세요.
라이선스 : Noto Sans KR은 오픈소스 폰트로 자유롭게 사용 가능하지만,
배포 시에는 반드시 Google Fonts 페이지를 출처로 명시해주는 게 좋아요.

간단히 쓰고 싶다면 Google Fonts CDN 빌드 환경이라면 npm(fontsource) 정책상 외부 사용이 어렵다면 직접 호스팅 이 세 가지 중 하나로 선택하면 됩니다 😊

'🖥️ 프론트엔드 > 🎨퍼블리싱' 카테고리의 다른 글

# CSS 선택자 정리 : 인접 형제 결합자부터 형제 선택자까지 (0)	2025.11.04
# CSS 리셋(Reset)코드 CDN 연결 (0)	2025.09.16
# 부트스트랩 및 부트스트랩 아이콘(bootstrap icons) CDN (0)	2025.09.15
# 최신 제이쿼리(jQuery), 제이쿼리 UI CDN (0)	2025.09.10
# jQuery로 만드는 커스텀 다중 선택 select 박스! (라이브러리 X) (2)	2025.09.01

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

📒솜이노트