font 추가하기

font를 추가하기 위해서는 몇 가지 방법이 있다.

css폴더에서 

1. font-face

@font-face {
  font-family: "establishRetrosansOTF";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/establishRetrosansOTF.woff") format('woff');
}

이렇게 추가하고, 원하는 곳에서 font-family: establishRetrosansOTF로 쓰면 된다.

2. import

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

import 형식으로도 추가할 수 있다.

font-family: Pretendard로 사용하면 된다.

 

html폴더에서도 가능하다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">

이런 형식으로 된 값을 head영역에 추가하면 된다.

https://fonts.google.com/?subset=korean 

Google Fonts

여기서 원하는 폰트를 찾고 위의 방법들로 시도해보자.

 

유의점

전체 스타일에 폰트를 적용은 아래와 같이 global-style에서 적용해주면 된다.

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

단, 아직까지 크롬의 버그가 하나 있다.

전체 스타일로 폰트를 적용할 경우 

(리액트 문제일 지는 좀 더 확인해야 하지만..) 적용이 됐음에도 위처럼 취소선이 그어지며 적용안된 것 처럼 보여진다.

실제로 적용은 된 것이니 걱정하지 않아도 된다.