[23.06.08] Pretendard 폰트 적용

이슈 내용

프로젝트의 목표가 웹앱이기 때문에 반응형으로 제작해야 한다. 안드로이드, iOS 모두 고려했을 때 폰트를 통일하는 것이 화면 통일하는데 편하므로 Pretendard 폰트를 적용하려고 한다.

해결 방법

• html 부분에 추가

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

• index.css에 @import 추가, html에 font-family 추가

  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css');
  
  html {
  	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;
  }

참고

Pretendard Github