WEBFONT IMPLEMENTATION GUIDE

Webfont integration guide

Copy code for an actual delivered font file, then check version pinning, system fallback and license conditions.

KoreaFonts · jsDelivr

01 / SELECT A FONT

Choose a typeface

Available webfontsActual font faceWeight

Pretendard · WOFF2 · 748.9 KB

02 / HTML + CSS

Integration code for the selected file

Review the license and original publisher links, actual file URL, weight and system fallback before applying the code.

<!-- 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>

If clipboard access is unavailable, select and copy the code manually. Installation TTF/OTF files and web delivery files serve different purposes.

Check permissions and original files for this font →

03 / LIVE TEST

Rendering preview

font-synthesis: none

Specimen text

다람쥐 헌 쳇바퀴에 타고파. 한글의 아름다움을 담다. 0123456789

Check the displayed load status. CDN failures or unsupported characters can result in system fallback.

BEFORE YOU SHIP

Before applying the code

01Pin the delivery version

Provided URLs point to a specific KoreaFonts commit. Keep the pinned URL, and check weights, character widths and layout when updating to another version.

02Select an actual font weight

An unavailable weight can cause synthesized rendering. Use the actual faces or verified variable-axis ranges and retain font-synthesis: none.

03Check fallback and loading

Use font-display: swap and system fallback. The layout can change when the webfont becomes available; check your actual page under slow network conditions.

04Check license terms and evidence

Commercial use, web/app embedding, redistribution and modification have separate permissions. Check the font detail and publisher’s original terms, and follow required notices and restrictions.

Read the license states →

FILE SIZE & COVERAGE

File size and character coverage

Sizes vary by font. Check the selected file’s actual size and analyzed coverage on its detail page. No unprovided subset or unmeasured savings are assumed.

SOURCE DOCUMENTATION

Webfont integration guide

Choose a typeface

Integration code for the selected file

Rendering preview

Official documentation and distribution

KoreaFonts · GitHub ↗

MDN · @font-face ↗

MDN · font-display ↗

Webfont code