프리텐다드 웹폰트 적용법

Pretendard · 굵기 9종 · OFL 1.1 · jsDelivr 배포

본문·UI 기본값으로 가장 많이 쓰인다. 가변 폰트라 굵기 전부 넣어도 용량 부담이 적다.

미리보기

다람쥐 헌 쳇바퀴에 타고파 Ag 123

적용하는 법

HTML head에 아래를 붙이면 끝입니다. 폰트 파일을 내려받거나 서버에 올릴 필요는 없습니다.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">

<style>
  body { font-family: "Pretendard Variable", sans-serif; }
</style>
  1. 위 link 태그를 <head> 안에 넣는다.
  2. CSS에서 font-family: "Pretendard Variable", sans-serif;로 지정한다.
  3. 폰트를 받는 동안 쓸 대체 폰트를 뒤에 남겨 둔다. 지우면 로딩 중 글자가 안 보인다.

이럴 때 쓴다

무슨 폰트를 쓸지 아직 안 정했을 때. 대시보드, 관리자 화면, 앱 UI처럼 글자 크기가 제각각인 화면에서 제일 안전하다.

이럴 땐 다른 걸 쓴다

브랜드 인상을 남겨야 하는 랜딩 제목. 너무 흔해서 기억에 안 남는다.

같이 쓰면 좋은 폰트: 고운바탕 · 나눔고딕코딩

같은 고딕 계열: 수트 · 본고딕 · 나눔고딕 · IBM 플렉스 산스 KR · 고운돋움

정보

영문 이름Pretendard
CSS font-familyPretendard Variable
굵기100, 200, 300, 400, 500, 600, 700, 800, 900 (9종)
가변 폰트예 — 굵기를 전부 넣어도 파일 하나
라이선스OFL 1.1
배포jsDelivr
공식 페이지https://github.com/orioncactus/pretendard

자주 묻는 질문

프리텐다드(Pretendard)을 상업적으로 써도 되나요?

OFL 1.1이라 상업적 사용과 수정, 재배포가 허용됩니다. 폰트 파일 자체를 파는 것만 금지됩니다. 계약이 걸린 작업이라면 공식 페이지에서 원문을 확인하세요.

프리텐다드은 굵기가 몇 종인가요?

9종입니다(100, 200, 300, 400, 500, 600, 700, 800, 900). 가변 폰트라 굵기를 전부 넣어도 파일은 하나입니다.

프리텐다드은 어디에 쓰면 안 되나요?

브랜드 인상을 남겨야 하는 랜딩 제목. 너무 흔해서 기억에 안 남는다.

← 폰트 26종 전체 보기