TIL-2024.08.04 - React - 폰트 적용하는 방법

 

 

 

 

 

 

목표:

1. 눈누에서 폰트 다운로드

2. 다운로드한 폰트 적용

 

폰트 다운로드

1. 다운 받으려는 폰트 찾기 > suit 라는 폰트 사용 예정

https://noonnu.cc/font_page/845

눈누

 

 

- 여기에서 [다운로드 페이지로 이동] 을 클릭 시, 다운로드 페이지로 이동

 

 

2. index.html 에 붙여넣기

 

- index.html 에서 import 해서 사용할 예정이여서, 아래 줄을 복사해서 index.html header 에 붙여넣기

<link href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css" rel="stylesheet">

 

 

 

3. React 에서 적용하기 (@css-in-js)

 

body {
    font-family: 'SUIT', sans-serif;
}

 

 

- 설정된 globalStyles.ts 에서 위와 같이 적용