무료 상업 폰트 프리텐다드(Pretendard) 웹에서 사용하기

프리텐다드(pretendard) 폰트는 inter와 본고딕(Noto), M PLUS 1p를 바탕으로 결합하여 서로의 단점을 보완하여 만든 폰트입니다.

다국어를 지원하므로 다국어 타이포그래피에서 이용 시 자연스러운 글꼴을 만나볼 수 있습니다.

그리고 window와  ios 둘다 지원이 가능하여 어디서든 동일환 환경에서 글꼴을 서비스할 수 있습니다.

SIL 오픈 폰트 라이선스로 배포되며, 글꼴 단독 판매를 제외한 모든 상업적 행위나 수정, 재배포 가능할 글꼴입니다.

 

 

CDN서비스(jsDelivr, cdnjs, UNPKG)를 이용하여 프리텐다드 웹폰트를 사용할 수 있습니다. 

jsDelivr, cdnjs, UNPKG 중 원하는 CDN을 사용하시면 됩니다.

총 9가지의 굵기로 제공되며, 가변 글꼴도 지원합니다.

 

 

 

HTML

모든 기능이 들어있는 프리텐다드 웹폰트를 이용할 수 있는 HTML소스의 코드는 다음과 같습니다. 

한글의 모든 문자 조합수가 들어있는 소스라 폰트용량이 큽니다.

사용하는 font-family는  Pretendard  로 해주시면 표현됩니다.

<!-- html코드 이용시 -->
<!-- jsDelivr  -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css" />

<!-- cdnjs  -->
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.6/static/pretendard.css" />

<!-- UNPKG  -->
<link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/pretendard@1.3.6/dist/web/static/pretendard.css" />

 

 

CSS

css소스상에 import 하여 웹폰트 이용 시 아래의 3개 CDN 중에서 원하시는 것을 사용하면 됩니다.

 

/* css 소스 이용시 */
/* jsDelivr */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");

/* cdnjs */
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.6/static/pretendard.css");

/* UNPKG */
@import url("https://unpkg.com/pretendard@1.3.6/dist/web/static/pretendard.css");

 

 

 

다이나믹 서브셋

다이나믹 서브셋이란 한글에서 잘 쓰이지 않는 문자를 제거하여 폰트 파일의 용량을 줄인 것을 말합니다.

한글은 조합형 문자로 만들어낼 수 있는 문자의 개수가 11172개로 엄청 문자의 수가 엄청 많습니다.

이중 잘 쓰지 않는 문자를 제거하여 2350자만 사용하면 용량이 현저하게 줄어들게 됩니다. 

프리텐다드 웹폰트도 이와 동일한 방식으로 다이나믹 서브셋을 제공합니다. 다음 코드를 사용하면 빠르게 프리텐다드 웹폰트를 사용할 수 있습니다. 이때 사용하는 font-family 이름은   Pretendard  입니다.

 

HTML

<!-- 다이나믹 서브셋 html용 CDN -->
<!-- jsDelivr -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css" />

<!-- cdnjs -->
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.6/static/pretendard-dynamic-subset.css" />

<!-- UNPKG -->
<link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/pretendard@1.3.6/dist/web/static/pretendard-dynamic-subset.css" />

 

CSS

/* 다이나믹 서브셋 css용 CDN 주소 */
/* jsDelivr */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css");

/* cdnjs */
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.6/static/pretendard-dynamic-subset.css");

/* UNPKG */
@import url("https://unpkg.com/pretendard@1.3.6/dist/web/static/pretendard-dynamic-subset.css");

 

 

가변 다이나믹 서브셋

가변 다이나믹 서브셋은 가변 weight 속성과 함께 기존 다이나믹 서브셋보다 적은 용량으로 프리텐다드를 사용할 수 있습니다. 

아래의 코드로 사용할 수 있으며, 사용하는 font-family명은  Pretendard Variable  입니다.

 

HTML

<!-- 가변 다이나믹 서브셋 html용 CDN -->
<!-- jsDelivr -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css" />

<!-- cdnjs -->
<link rel="stylesheet" as="style" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.6/variable/pretendardvariable-dynamic-subset.css" />

<!-- UNPKG -->
<link rel="stylesheet" as="style" crossorigin href="https://unpkg.com/pretendard@1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css" />

 

CSS

/* 가변 다이나믹 서브셋 css용 CDN 주소 */
/* jsDelivr */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* cdnjs */
@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.6/variable/pretendardvariable-dynamic-subset.css");

/* UNPKG */
@import url("https://unpkg.com/pretendard@1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css");

 

 

font-family 설정하기

시스템에 가능한 글꼴을 맞추거나 아니면 어디서든 동일한 글꼴로 환경으로 구성할 수 있습니다.

첫 번째로 시스템이 제공하는 글꼴에 최대한 맞추고자 할 때 아래와 같이 구성할 수 있습니다.

font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

 

 

두 번째로 어디서든지 동일한 글꼴을 보여주고 싶다면 다음과 같은 font-family를 구성할 수 있습니다.

font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;