고정 헤더 영역
상세 컨텐츠
본문
홈페이지나 블로그, 쇼핑몰을 제작할 때 폰트 선택은 디자인 퀄리티에 큰 영향을 줍니다.
특히 한글 웹사이트에서는 잘 정돈된 한글 폰트를 사용하는 것이 매우 중요하죠.
그중에서도 최근 가장 많이 사용되는 인기 폰트 중 하나가 바로 Noto Sans KR입니다.
이번 글에서는 Noto Sans KR 폰트에 대한 간단한 소개와 함께, CSS에서 적용하는 방법을 자세히 알려드릴게요!
💡 Noto Sans KR 폰트란?
Noto Sans KR은 Google과 Adobe가 공동 개발한 Noto 프로젝트의 일부로, 한글을 지원하는 산세리프(고딕) 폰트입니다.
- Noto는 "No Tofu"에서 유래한 이름으로,
전 세계의 모든 언어에서 글자가 깨지지 않도록 만들자는 목표로 만들어졌어요. - Noto Sans KR은 한글 웹폰트 중에서도 깔끔하고 현대적인 느낌을 주며,
다양한 해상도와 브라우저에서도 안정적으로 렌더링되어 가독성이 좋습니다.
📌 특징 요약:
- 깔끔한 고딕체 스타일
- 다양한 두께(weight) 지원 (100 ~ 900)
- 무료 사용 가능 (Google Fonts)
- 기업, 포트폴리오, 블로그 등 어디에나 잘 어울림
✅ CSS에서 Noto Sans KR 적용하는 방법
1단계. Google Fonts에서 불러오기
먼저 HTML 파일의 <head> 안에 아래 코드를 삽입해 주세요:
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">위 코드는 300(얇은), 400(보통), 500(중간), 700(굵은) 굵기를 불러오는 예시입니다.
필요한 굵기만 선택해서 적용하면 속도도 최적화할 수 있어요.
2단계. CSS에서 폰트 적용하기
이제 CSS에서 원하는 요소에 font-family로 지정해줍니다:
body {
font-family: 'Noto Sans KR', sans-serif;
font-weight: 400;
line-height: 1.6;
color: #333;
}
위 예시는 웹사이트 전체에 Noto Sans KR을 기본 폰트로 적용하는 코드입니다.
다른 고딕 계열의 대체 폰트와 함께 sans-serif를 끝에 지정하는 것이 일반적인 패턴입니다.
🎨 폰트 굵기(weight) 설정
Noto Sans KR은 아래와 같은 다양한 굵기를 지원합니다:
Weight 숫자 설명
| Thin | 100 | 매우 얇음 |
| Light | 300 | 얇음 |
| Regular | 400 | 기본/보통 |
| Medium | 500 | 중간 굵기 |
| Bold | 700 | 굵게 |
| Black | 900 | 매우 굵게 |
CSS에서 이렇게 지정할 수 있어요:
h1 {
font-weight: 700;
}
p {
font-weight: 300;
}
💻 브라우저 지원 및 성능
- 대부분의 최신 브라우저에서 완벽하게 지원되며,
Google Fonts를 통해 불러오기 때문에 별도의 파일 설치 없이 빠르게 적용됩니다. - 모바일에서도 문제없이 잘 작동하고,
display=swap 옵션으로 FOIT (Flash of Invisible Text) 현상도 최소화됩니다.
✅ 마무리
Noto Sans KR은 한글 웹사이트에서 가장 널리 사용되는 웹폰트 중 하나입니다.
깔끔하고 세련된 고딕체 폰트를 찾고 있다면 가장 먼저 고려해볼 만한 선택이에요.
한글 가독성 + 디자인 완성도를 동시에 잡고 싶다면 지금 바로 적용해보세요!
간단한 코드 몇 줄이면 여러분의 웹페이지가 훨씬 세련돼질 거예요 🙌
'홈페이지 제작 > CSS' 카테고리의 다른 글
| CSS란? 홈페이지 만드는 사람들이 꼭 알아야 할 기본 지식 (1) | 2025.06.08 |
|---|---|
| 홈페이지 제작시 무료로 사용하는 아이콘 세상, Google Icons (Material Symbols) 완벽 가이드 (3) | 2025.06.06 |
| 무료로 즐기는 웹폰트의 세계, Google Fonts 완전 정복! (2) | 2025.06.05 |
| CSS로 텍스트에 그라데이션 주는 방법 (with 예제 코드) (1) | 2025.06.05 |
| CSS로 배경에 그라데이션 주는 방법 (with 예제 코드) (0) | 2025.06.05 |