WEBFONT IMPLEMENTATION GUIDE

웹폰트 연동 가이드

실제 배포 파일에 맞는 코드를 복사하고, 버전 고정·시스템 폴백·라이선스 조건을 확인하세요.

KoreaFonts · jsDelivr

01 / SELECT A FONT

적용할 서체 선택

웹폰트 제공 폰트실제 폰트 파일굵기

프리텐다드 · WOFF2 · 748.9 KB

02 / HTML + CSS

선택한 파일의 연동 코드

라이선스 출처와 원 제작자 링크, 실제 파일 주소, 굵기와 시스템 폴백을 확인한 후 적용하세요.

<!-- License: https://github.com/koreafonts/fonts/raw/a862a201131e63141db66458dbbf85a6697cbce4/Pretendard/LICENSE.txt | Original: https://cactus.tistory.com/306 -->
<p>Font source: <a href="https://cactus.tistory.com/306">Original publisher</a> · <a href="https://github.com/koreafonts/fonts/raw/a862a201131e63141db66458dbbf85a6697cbce4/Pretendard/LICENSE.txt">License</a></p>
<style>
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/koreafonts/fonts@ee4054052e251025fe63b73c275455b27ac75852/Pretendard/Pretendard-Regular.woff2") format("woff2");
}
.specimen { font-family: "Pretendard"; font-weight: 400; font-style: normal; font-synthesis: none; }
</style>

복사를 사용할 수 없다면 코드 상자를 직접 선택해 복사하세요. 다운로드용 TTF·OTF와 웹용 파일은 같은 용도로 취급하지 않습니다.

선택한 폰트의 이용조건과 원본 파일 확인 →

03 / LIVE TEST

렌더링 미리보기

font-synthesis: none

미리보기 문장

다람쥐 헌 쳇바퀴에 타고파. The quick brown fox jumps over the lazy dog. 0123456789

화면에 표시된 상태를 확인하세요. CDN 장애나 지원하지 않는 글자는 시스템 폰트로 대체될 수 있습니다.

BEFORE YOU SHIP

적용 전 체크리스트

01고정 버전 사용

제공되는 URL은 KoreaFonts 저장소의 특정 커밋을 가리킵니다. 파일이 바뀌는 주소로 임의 변경하지 말고, 새 버전을 적용할 때 굵기·글자 폭과 레이아웃을 다시 확인하세요.

02실제 파일 굵기 선택

파일에 없는 굵기를 지정하면 브라우저가 굵기를 합성할 수 있습니다. 선택창에 표시된 실제 파일 또는 검사된 가변 축의 범위를 사용하고 font-synthesis: none을 유지하세요.

03폴백과 로딩 상태 확인

font-display: swap과 시스템 폰트 폴백을 사용하세요. 웹폰트가 적용되는 시점에 레이아웃이 바뀔 수 있으므로 실제 페이지와 느린 네트워크 환경에서 확인합니다.

04이용조건과 원문 확인

상업·웹 임베딩·앱 임베딩·파일 재배포·변형의 허용 범위는 별개입니다. 폰트 상세의 조건과 제작자 원문을 확인하고 필요한 고지와 제한을 지키세요.

라이선스 상태 읽는 법 →

FILE SIZE & COVERAGE

용량과 문자 범위

파일 크기는 폰트마다 다릅니다. 선택한 파일의 실제 크기와 검사된 문자 범위를 상세에서 확인하세요. 원본에 없는 서브셋이나 측정하지 않은 절감률은 제공하지 않습니다.

SOURCE DOCUMENTATION

공식 기술 문서와 배포 저장소

KoreaFonts · GitHub ↗

폰트 원본·라이선스·배포 파일 확인

MDN · @font-face ↗

웹폰트 CSS 속성과 사용법

MDN · font-display ↗

웹폰트 로딩 중 표시 동작