Pretendard 가변 폰트 다운로드 & 적용 방법

 

안녕하세요 찐망고입니다.

이전 포스팅에서 MinSans와 Pretendard 서체 비교를 다룬 이후,

가변 폰트(Variable Font)에 대한 질문이 많아서
이번에는 가변 폰트의 개념과 Pretendard 가변 폰트 다운로드 및 적용 방법을 정리해보겠습니다.

 

1. 가변 폰트(Variable Font)란?

◈ 기존 폰트와 가변 폰트의 차이점

가변 폰트는 한개의 폰트 파일로 여러가지 스타일(굵기, 너비, 기울기 등)을 조절할 수 있는 폰트 포맷입니다.

기존의 정적인 폰트와 달리, 가변폰트는 CSS속성만으로 다양한 스타일을 자유롭게 적용할 수 있죠

→ 여러개의 폰트파일대신, 하나의 가변폰트파일로 다양한 스타일을 구현할 수 있는 기술!

비교 항목	기존 폰트(Static Font)	가변 폰트(Variable Font)
파일개수	여러개의 .woff2, .ttf파일 필요	하나의 .woff2파일로 해결
스타일 적용	font-weight: 400, font-weight: 700 등 정해진 값만 사용 가능	font-wieght: 100 ~ 900까지 자유롭게 조절 가능 폰트마다 font-weight가 다를 수 있음
파일 크기	굵기별로 폰트파일을 추가해야해서 크기가 커짐	하나의 파일로 다양한 굵기, 스타일 적용가능(최적화효과)
웹 퍼포먼스	폰트파일이 많아 로딩속도가 느려질 수 있음	하나의 파일만 로딩하면 되므로 성능 향상
지원기능	기본 굵기, 기울기만 가능	굵기(weight), 너비(width), 기울기(slant)등 세부 조정가능

 

◈ 가변폰트의 장점

• 파일 크기 절약 & 로딩속도 향상
• 웹 성능 개선 (LCP 성능 최적화)
• 다양한 스타일을 하나의 파일로 해결 가능
• 128, 379처럼 세밀한 font-weight 설정 가능 (일반 폰트는 정해진 값만 가능)
• 최신 브라우저 완벽 지원

 

 

2. 너비 font-stretch 조절 가능?

가변 폰트는 굵기(font-weight)뿐만 아니라 너비(font-stretch), 기울기(font-style)까지 조절 가능합니다.
다만, 모든 폰트가 font-stretch를 지원하는 것은 아니며, Pretendard는 현재 지원하지 않습니다.

 

너비 조절을 지원하는 가변 폰트 예제 (Inter Variable 사용)

@font-face {
  font-family: 'InterVariable';
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3P8t9sJTtcP9W5M9LcfwzMi.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 50% 200%;
  font-display: swap;
}

.text-normal {
  font-family: 'InterVariable', sans-serif;
  font-weight: 400;
  font-stretch: 100%;
}

.text-narrow {
  font-family: 'InterVariable', sans-serif;
  font-weight: 400;
  font-stretch: 75%; /* 좁게 */
}

.text-wide {
  font-family: 'InterVariable', sans-serif;
  font-weight: 400;
  font-stretch: 125%; /* 넓게 */
}

 

 

3. 가변 폰트 애니메이션 적용 방법

font-weight (굵기) 애니메이션

@keyframes weightChange {
  0% { font-weight: 100; }
  50% { font-weight: 900; }
  100% { font-weight: 100; }
}

.animated-text {
  font-family: 'Pretendard Variable', sans-serif;
  font-weight: 100;
  animation: weightChange 2s infinite alternate;
}

 

font-stretch 애니메이션

@keyframes stretchChange {
  0% { font-stretch: 75%; }
  50% { font-stretch: 125%; }
  100% { font-stretch: 75%; }
}

.animated-text {
  font-family: 'Inter Variable', sans-serif;
  font-stretch: 100%;
  animation: stretchChange 2s infinite alternate;
}

 

 

4. 한글 가변 폰트 종류

한글 가변폰트는 영어에 비해 개발이 어렵지만, 현재 사용 가능한 대표적인 폰트는 3가지 입니다.

한글은 영어에 비해 초성/중성/종성 조합때문에 글자수가 엄청 많습니다(11,172)

가변폰트로 최적화하는게 쉽지않죠. 와중에 나온 한글가변폰트들은 사랑 ❤

Noto Sans KR Variable (노토 산스)

 - Google & Adobe에서 만든 공식 한글 폰트

 - 가독성이 뛰어나고, 범용적인 사용 가능

MinSans Variable (민산스)

 - riri & partners에서 개발한 모던한 한글 가변 폰트

 - Noto Sans를 커스텀한 폰트

 - 아직 대중적인 사용이 적음

Pretendard Variable (프리텐다드)

 - Orion Cactus에서 개발한 가변폰트

 - UI/UX디자인에 최적화된 폰트로, 다양한 웹사이트에서 가장많이 사용됨, 가변폰트 최적화

 

 

5. Pretendard 가변 폰트 다운로드 방법 (공식 다운로드 링크)

GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ

 

CSS파일첨부, PretendardVariable.woff2폰트 파일 첨부

variable.zip

1.95MB

 

 

6. Pretendard 가변 폰트 웹사이트 적용 방법

- CSS적용 방법 (@font-face  사용 예제)

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('./woff2/PretendardVariable.woff2') format('woff2-variations');
}

body {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
}

 

 

7. Pretendard 가변폰트의 장점

• 다양한 두께지원(font-weight 45 ~ 920)
• 파일 크기 절약 (한 개의 파일로 모든 스타일 적용 가능)
• 웹사이트에서 가장 널리 사용되는 한글 가변 폰트
• 가변 폰트 최적화로 웹 성능 향상 (LCP 개선 효과)