한글 폰트 적용 · 최적화
한글 웹폰트는 영문보다 글자 수가 압도적으로 많아(2,350~11,172자) 용량이 큽니다. 그래서 선택과 최적화가 중요합니다.
추천 한글 폰트
| 폰트 | 특징 | 라이선스 |
|---|---|---|
| Pretendard | 가장 인기. 깔끔하고 다양한 굵기 | 무료(상업 가능) |
| Noto Sans KR | 구글 폰트, 안정적 | 무료(상업 가능) |
| SUIT | 모던한 느낌 | 무료(상업 가능) |
| 나눔스퀘어 네오 | 네이버 제작 | 무료(상업 가능) |
라이선스 필수 확인 — “무료”라도 웹폰트 사용·임베드 조건이 다릅니다. 특히 상업적 사용·웹 임베드 허용 여부를 반드시 확인하세요.
적용 방법
방법 1. 우측 패널에서 폰트 고르기 (기본 폰트)
Framer에 내장된 폰트(Google Fonts 포함)는 우측 패널에서 바로 선택합니다. Noto Sans KR 등 일부 한글 폰트도 여기 있습니다.
텍스트 레이어 선택
폰트를 바꿀 텍스트를 클릭해 선택합니다. (T로 새 텍스트를 만들어도 됩니다.)
우측 패널에서 폰트 선택기 열기
오른쪽 패널의 Text 섹션에서 현재 폰트 이름을 클릭하면 폰트 선택기(font picker)가 열립니다.
폰트 검색·선택
검색창에 폰트 이름(예: Noto Sans KR)을 입력해 찾고 클릭하면 바로 적용됩니다.
굵기(Weight) 지정
폰트 이름 옆의 Weight 드롭다운에서 Regular · Medium · Bold 등 굵기를 고릅니다.
자주 쓰는 폰트·굵기는 텍스트 스타일로 저장해두면 클릭 한 번으로 일관되게 적용됩니다.
방법 2. 커스텀 폰트 파일 업로드 (Pretendard 등)
Pretendard처럼 내장 목록에 없는 폰트는 폰트 파일을 직접 업로드합니다. 업로드 위치는 두 곳입니다.
2-1. 폰트 선택기에서 바로 업로드 (가장 빠름)
텍스트 레이어 선택 후 폰트 선택기 열기
방법 1과 동일하게, 텍스트를 선택하고 우측 패널에서 폰트 선택기를 엽니다.
Custom 탭으로 이동
폰트 선택기 상단의 Custom 탭을 클릭합니다.
Upload Fonts 클릭
Upload Fonts 버튼을 누르고, 내 컴퓨터에서 폰트 파일(.woff2 권장)을 선택합니다.
업로드된 폰트 적용
업로드가 끝나면 Custom 탭 목록에 폰트가 나타납니다. 클릭해 적용하세요. 폰트는 패밀리(family) 단위로 묶여 표시되어, 굵기가 여러 개여도 깔끔하게 보입니다.
2-2. 팀 설정에서 업로드 (여러 프로젝트 공용)
라이선스 폰트를 팀 전체에서 쓰려면 대시보드에서 업로드합니다.
Framer 대시보드 → Team Settings
프로젝트가 아니라 대시보드의 Team Settings(팀 설정) 로 이동합니다.
폰트 파일 업로드
커스텀 폰트의 WOFF / WOFF2 파일을 업로드합니다.
프로젝트 새로고침
열려 있던 프로젝트를 새로고침하면 업로드한 폰트가 폰트 선택기에 나타납니다.
파일 형식 — Framer는 .woff2 를 권장합니다. 웹 배포에 최적화돼 있어
다른 형식보다 빠르게 로드됩니다. .woff도 지원합니다.
굵기(Weight)별 파일 — 정적 폰트는 굵기마다 파일이 따로입니다. Regular와 Bold 두 굵기를 쓰려면 두 파일을 모두 업로드하세요. Variable(가변) 폰트는 한 파일에 여러 굵기가 들어 있어 하나만 올리면 됩니다. (Pretendard도 Variable 버전 제공)
방법 3. 코드로 웹폰트 불러오기
코드 컴포넌트에서 CDN으로 불러오는 방법도 있습니다. 업로드 없이 최신 버전을 쓰고 싶을 때 유용합니다.
// Pretendard CDN 예시
// <link rel="stylesheet"
// href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />용량 최적화 (중요)
한글 폰트는 무거우므로 다음을 신경 쓰세요.
- 굵기 줄이기 — 4
5개 굵기를 다 쓰지 말고 23개만. - woff2 사용 — 가장 압축률이 좋습니다.
- 서브셋(Subset) — 실제 쓰는 글자만 담은 경량 버전을 쓰면 용량이 크게 줍니다.
(Pretendard는
dynamic-subset버전을 제공합니다.) font-display: swap— 폰트 로딩 중에도 텍스트가 먼저 보이게.
성능이 중요하면 Pretendard dynamic subset을 권장합니다. 보이는 글자만 내려받아 초기 로딩이 빠릅니다.
자주 겪는 문제
- 한글이 깨져 보임(□□□) — 폰트에 한글 글리프가 없는 경우. 한글 지원 폰트로 교체.
- 본문은 멀쩡한데 특정 글자만 다른 폰트 — fallback 폰트가 적용된 것. 폰트 지정 범위를 확인하세요.