📝 CSS 웹 폰트 적용하기 — 구글 폰트 & 눈누 폰트
기본 폰트만 쓰던 웹페이지, 폰트 하나만 바꿔도 분위기가 확 달라집니다.
구글 폰트와 눈누 폰트를 활용해서 원하는 폰트를 웹에 적용하는 방법을 알아봅니다.
01. 웹 폰트(Web Font)란? 🌐
웹 폰트는 사용자 컴퓨터에 폰트가 설치되어 있지 않아도,
인터넷을 통해 폰트 파일을 불러와 웹페이지에 표시하는 방식입니다.
💡 왜 필요할까?
/* 웹 폰트 없이 — 사용자 컴퓨터에 없는 폰트는 적용 안 됨 */
font-family: "나눔고딕"; /* 이 폰트가 없는 PC에선 기본 폰트로 표시됨 */
/* 웹 폰트 사용 — 누구 컴퓨터에서 열어도 동일하게 보임 ✅ */
@import url('구글폰트 주소');
font-family: "Nanum Gothic";디자이너가 공들여 만든 폰트가 다른 사람 화면에서는 굴림체로 보이는 불상사를 막을 수 있습니다!
02. 구글 폰트 (Google Fonts)
구글 폰트는 구글에서 무료로 제공하는 웹 폰트 서비스입니다.
영문 폰트 위주지만 한글 폰트도 점점 늘어나고 있습니다.
🔗 사이트: https://fonts.google.com
✅ 적용 방법 (3단계)
STEP 1 — 구글 폰트 사이트에서 폰트 선택
원하는 폰트를 검색하고 클릭합니다.
한글 폰트를 찾으려면 검색창에 Korean을 필터로 걸거나 한글 폰트명을 검색하세요.
STEP 2 — Get font → Get embed code 클릭
원하는 굵기(weight)를 선택한 뒤 Get embed code를 클릭하면
아래와 같은 코드가 나타납니다.
<!-- HTML <head> 안에 붙여넣기 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">또는 CSS 파일 최상단에 @import 방식으로도 사용 가능합니다.
/* CSS 파일 맨 위에 붙여넣기 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');STEP 3 — CSS에서 font-family 적용
body {
font-family: "Nanum Gothic", sans-serif;
/* 폰트 로드 실패 시 sans-serif(고딕 계열)로 대체 */
}03. 눈누 폰트 (Noonnu)
눈누는 한글 무료 폰트 전문 사이트입니다.
구글 폰트보다 훨씬 다양한 한글 폰트를 제공하며,
상업적 이용 가능 여부도 확인할 수 있어 실무에서 매우 유용합니다.
🔗 사이트: https://noonnu.cc
✅ 적용 방법 (3단계)
STEP 1 — 눈누 사이트에서 폰트 선택
원하는 폰트를 클릭하면 상세 페이지로 이동합니다.
상단에 "웹폰트로 사용" 섹션이 있습니다.
STEP 2 — @font-face 코드 복사
/* 눈누에서 제공하는 코드 예시 */
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}이 코드를 CSS 파일 맨 위에 붙여넣습니다.
STEP 3 — CSS에서 font-family 적용
body {
font-family: 'GmarketSansMedium', sans-serif;
}04. 구글 폰트 vs 눈누 비교 📊
| 구분 | 구글 폰트 | 눈누 |
|---|---|---|
| 주요 언어 | 영문 위주 (한글 일부) | 한글 전문 |
| 적용 방식 | <link> 또는 @import | @font-face |
| 폰트 수 | 매우 많음 | 한글 폰트 전문 |
| 상업적 이용 | 폰트별 확인 필요 | 라이선스 정보 명시 |
| 특징 | 안정적인 CDN | 다양한 개성 있는 한글 폰트 |
실무 팁: 영문 폰트는 구글 폰트, 한글 폰트는 눈누를 주로 사용합니다.
두 가지를 조합해서 영문/한글 폰트를 각각 지정하는 것도 좋은 방법입니다!
05. 영문 + 한글 폰트 조합하기
구글 폰트(영문)와 눈누(한글)를 함께 사용하는 실무 패턴입니다.
/* 눈누 한글 폰트 */
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* 구글 영문 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
/* 영문은 Roboto, 한글은 GmarketSansMedium 적용 */
font-family: "Roboto", 'GmarketSansMedium', sans-serif;
}
font-family는 왼쪽부터 우선순위가 적용됩니다.
영문 글자는 Roboto로, 한글 글자는 GmarketSansMedium으로 자동 분리됩니다!
06. ⚠️ 자주 하는 실수
❌ 실수 1 — @import를 CSS 파일 중간에 넣기
/* ❌ 잘못된 예 */
body { color: red; }
@import url('구글폰트 주소'); /* 중간에 넣으면 적용 안 됨! *//* ✅ 올바른 예 — 반드시 CSS 파일 맨 위에 */
@import url('구글폰트 주소');
body { color: red; }❌ 실수 2 — font-family 이름 오타
/* ❌ 구글 폰트 이름: "Nanum Gothic" */
font-family: "NanumGothic"; /* 띄어쓰기 빠짐 → 적용 안 됨 */
/* ✅ 정확히 일치해야 함 */
font-family: "Nanum Gothic";구글 폰트/눈누에서 제공하는 코드를 그대로 복사해서 사용하는 것이 가장 안전합니다!
❌ 실수 3 — 상업용 사용 전 라이선스 미확인
눈누에서 폰트를 선택할 때 라이선스 탭을 반드시 확인하세요.
개인 프로젝트는 대부분 무료이지만, 상업적 이용 시 제한이 있는 폰트도 있습니다.
📖 핵심 학습 포인트 요약
📌 웹 폰트를 쓰면 사용자 PC에 폰트가 없어도 항상 동일하게 보입니다.
📌 구글 폰트 — <link> 또는 @import로 적용. 영문 폰트가 풍부합니다.
📌 눈누 — @font-face로 적용. 한글 폰트 전문, 라이선스 정보 명확합니다.
📌 font-family에 여러 폰트를 나열하면 왼쪽부터 우선 적용되어 영문/한글 폰트를 자동으로 분리할 수 있습니다.
📌 @import는 반드시 CSS 파일 맨 위에, 폰트 이름은 정확히 복붙해서 사용하세요.
