Pretendard 폰트 타입

1. 폰트 import

<!--
* font name: "Pretendard" 
* description: 모든 기능 
-->
<!-- html에서 작성하는 경우 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />
<!-- css에서 작성하는 경우 -->
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");



<!--
* font name: "Pretendard" 
* description: 다이나밋 서브셋. (페이지에 포함된 글자만 선택적 다운해서 보다 빠르게 사용)
-->
<!-- html에서 작성하는 경우 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css" />
<!-- css에서 작성하는 경우 -->
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");


<!--
* font name: "Pretendard Variable" 
* description: 가변 다이나밋 서브셋. 용량 더욱 적음
-->
<!-- html에서 작성하는 경우 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css" />
<!-- css에서 작성하는 경우 -->
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css");


<!-- 
* font name: "Pretendard Variable" 
* description: 가변 글꼴. 가변 weight 속성 사용 시
-->
<!-- html에서 작성하는 경우 -->
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css" />
<!-- css에서 작성하는 경우 -->
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");

웹폰트로 쓰는 경우 속도를 우선해서 "pretendard variable"을 사용.

2. css내 font 정의

/* 시스템폰트 우선하는 경우 */
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;

/* Pretendard 우선하는 경우 */
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;

출처 : https://minitoy.tistory.com/1319