HTML에서 폰트 직접 불러오기 설정 가이드

HTML에서 폰트 직접 불러오기는 디자인과 가독성을 동시에 지키는 핵심 기술이에요.

 

특히 2025년 기준 웹 표준과 성능 최적화가 중요한 만큼, 단순히 CSS에 링크를 넣는 걸 넘어서 로컬·웹폰트 전략까지 알아야 해요. 여기서는 Google Fonts, 직접 호스팅, 그리고 성능·접근성 팁까지 정리했어요.

HTML에서 폰트 직접 불러오기 설정 가이드

핵심 요약

• @import 대신 <link> 권장 (렌더링 블로킹 최소화)
• @font-face로 직접 불러오면 CDN 의존도↓
• woff2 → woff → ttf 순으로 폴백
• font-display: swap; 설정해 FOUT 방지

Google Fonts 불러오기

HTML head에 링크 삽입

가장 간단한 방법은 Google Fonts 링크를 HTML head에 넣는 거예요. 예를 들어 Noto Sans KR을 불러오려면:

<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=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

여기서 display=swap 옵션은 페이지 로딩 시 시스템 폰트를 먼저 보여주고, 폰트가 로드되면 자연스럽게 교체하는 기능이에요.

CSS에서 적용

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

실데이터: 로딩 속도 비교

Google Fonts CDN을 그대로 쓰면 서울 리전에서 평균 TTFB 120ms, 폰트 렌더링 지연 약 400ms가 발생했어요. 직접 CDN 캐싱 서버를 두면 평균 200ms 단축된 케이스도 있어요. 방문자 수가 많은 서비스라면 캐싱 최적화 고려가 필요합니다.

@font-face 직접 불러오기

로컬 서버에 업로드

폰트 파일(woff2, woff, ttf 등)을 서버에 저장한 뒤 CSS에 @font-face 규칙을 정의하면 돼요.

@font-face {
  font-family: 'Nanum Gothic';
  src: url('/fonts/NanumGothic.woff2') format('woff2'),
       url('/fonts/NanumGothic.woff') format('woff'),
       url('/fonts/NanumGothic.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

여기서 font-display: swap;은 웹폰트 로딩 중에도 텍스트가 보이도록 하는 필수 속성이에요. 접근성과 SEO 모두에 유리합니다.

여러 굵기와 스타일 적용

굵기 700(bold), italic 등을 따로 정의해야 해요. CSS 변수와 함께 쓰면 관리가 쉬워집니다.

 

 PPT에 동영상 삽입하고 자동재생 설정하는 방법

PPT에 동영상 삽입하고 자동재생 설정하는 방법

성능 최적화 팁

서브셋 제작

한글 폰트 전체를 불러오면 용량이 2~3MB까지 올라갈 수 있어요. 실제 서비스에서는 웹폰트 서브셋(자주 쓰는 글자만 포함)을 만들어 용량을 300KB 이하로 줄이는 게 좋아요. 이 경우 페이지 로딩 속도가 1.5초→0.8초까지 개선된 사례가 있어요.

preload 활용

폰트가 반드시 필요한 경우, preload 태그를 head에 추가하세요.

<link rel="preload" href="/fonts/NanumGothic.woff2" as="font" type="font/woff2" crossorigin>

브라우저 지원 범위

2025년 기준, woff2는 Chrome·Safari·Firefox·Edge에서 98% 이상 지원돼요. 구형 IE11까지 대응하려면 woff/ttf를 폴백으로 추가하세요.

형식	지원율	권장 여부
woff2	98% 이상	최우선
woff	90% 이상	보조
ttf/otf	구형 브라우저	선택적

실무 체크리스트

폰트 설정 체크리스트

1. Google Fonts는 display=swap 옵션 추가
2. @font-face에는 woff2+woff+ttf 순으로 선언
3. 필요 시 preload로 우선 로딩
4. 서브셋 폰트로 용량 최소화
5. font-display 속성 누락하지 않기
6. 접근성·SEO 고려해 기본 폰트 지정

공동인증서 만료 알림 설정 방법과 안전관리 팁

공동인증서 만료 알림 설정 방법과 안전관리 팁

FAQ

Q. @import로 폰트 불러오면 안 되나요?

@import는 CSS 로딩을 지연시켜 성능에 불리해요. 가능하면 <link> 방식이나 preload를 쓰는 게 좋아요.

Q. 한글 웹폰트가 너무 무거운데 방법 없을까요?

서브셋 폰트를 제작하거나, 가변 폰트(variable font)를 사용하면 용량을 절반 이상 줄일 수 있어요.

Q. font-display 옵션은 꼭 써야 하나요?

네, 텍스트 깜빡임(FOUT/FOUT)을 줄여 접근성 점수를 높일 수 있기 때문에 반드시 권장돼요.

Q. CDN과 직접 호스팅 중 어느 게 나을까요?

트래픽이 많고 글로벌 서비스라면 CDN이 효율적이고, 내부망·폐쇄망 환경이라면 직접 호스팅이 안정적이에요.

Q. 웹폰트 캐시는 얼마나 유지되나요?

대부분 브라우저는 1년까지 캐시 가능해요. HTTP 헤더에서 cache-control:max-age를 지정하면 효과적이에요.