Pretendard 프리텐다드 깔끔! 상업적 사용 가능한 무료 폰트 추천

Pretendard(프리텐다드)라는 폰트를 알게됐는데 개발자분이 대단하시네요. 이거 팔아도 돈 많이 벌듯한데.. 상업적(Commercial) 사용도 가능이랍니다.

 

무료 폰트 Pretendard 기본 정보

• 글꼴 이름

  Pretendard

• 최초 릴리즈

  21. 06. 28.

• 최신 버전

  1.0

• 지원 포맷

  고정 글꼴

  .otf OpenType PostScript

  .woff.woff2 OpenType PostScript

  가변 글꼴

  .ttf OpenType TrueType

  .woff2 OpenType TrueType

• 글자 수

  13,777

• 라이선스

  SIL 오픈 폰트 라이선스

  글꼴 단독 판매를 제외한 모든 상업적 행위 및 수정, 재배포가 가능합니다.

• 크레딧

  바탕

  Inter: Rasmus Andersson

  한글 바탕

  Noto Sans CJK KR—본고딕: 산돌커뮤니케이션; 장수영, 강주연

  리디자인 및 제작

  길형진

 

프리텐다드 설치 방법

프리텐다드 폰트 다운로드 주소 : https://github.com/orioncactus/pretendard/releases/ 폰트 특성상 업데이트가 잦진 않지만 그래도 이왕이면 새 버전을 확인하고 받으세요.

 

프리텐다드 font를 설치하면 폴더가 여러개 나와서 뭘 해야하지??? 이렇게 됩니다. public 폴더, web 폴더 두개가 있어요. 그리고 각각의 폴더에는 또 static, variable 이렇게 있습니다. 가변폰트는 일반인들이 잘 쓰지 않으니

 

Pretendard-1.0\public\static 이 폴더에 있는거 설치하시면 됩니다.(마우스 우클릭 - 설치)

 

저는 일반 크롬에만 적용했는데 넘 이쁘네요! 하지만 모든 페이지에 전부다 100% 적용은 안되는듯? 예를 들면 네이버, 다음 뉴스 본문은 적용이 안됩니다. 폰트 문제는 아니구요.

 

Pretendard 웹폰트 사용법

CSS

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />

프리텐다드 다이나믹 서브셋

Pretendard에서는 웹폰트 용량 문제를 해결하기 위한 방법으로 Google Fonts에서 제공하는 Noto Sans KR와 동일한 방식으로 동적 서브셋을 제공합니다. 페이지에 포함된 글자만 선택적으로 다운로드해 보다 빠르게 Pretendard를 표시하려면 아래 코드를 사용하세요. 사용하는 font-family 이름은 Pretendard 입니다.

CSS

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css" />

---

가변 글꼴

가변 weight 속성을 사용하려면 아래 코드를 사용하세요. 사용하는 font-family 이름은 'Pretendard Variable' 입니다.

CSS

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css" />

---

font-family

시스템에 가능한 맞추고자 한다면 아래와 같은 font-family 구성을 추천합니다.

font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', Pretendard, Roboto, 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic', sans-serif;

어디서든 동일한 환경을 가지고자 한다면 아래와 같은 font-family 구성을 추천합니다.

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

무료 폰트로 추천드리고 싶습니다.