무료 웹폰트 Pretendard CDN 적용하기

프로젝트 디자인이 나왔는데 폰트가 Pretendard 여서 적용해봐야 한다.

바닐라JS 환경이기에 패키지 매니저로 관리할 수 없어서 CDN으로 적용했다.

 

 

Pretendard 공식 문서

https://github.com/orioncactus/pretendard

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

 

공식 문서에서 다양한 타입의 cdn을 찾을 수 있다.

나는 가변 다이나믹 서브셋 기준으로 적용했다.

 

 

reset.css

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

* {
    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;
}

 

 

HTML

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

 

간편하게 적용 완료!