기존에는 css파일에 @import 형태로 쉽게 적용하던 Google font를 react와 styled-component를 함께 사용하는 프로젝트에서 어떻게 적용해야 할지 몰랐다.
적용 방법은 아래와 같다.
1. 우선 Google font 중 적용할 폰트의 스타일과 weight을 모두 선택 후, @import형식이 아닌 <link>형식으로 복사한다.
2. 해당 복사본을 index.html에 붙여넣는다.
(* 기본 설치 이후에 따로 옮기지 않았다면 public 폴더안에 index.html이 위치해 있습니다)
3. GlobalStyles.jsx 파일에 font-family를 삽입한다.
오늘도 잘 해냈다!
'TIL' 카테고리의 다른 글
| 230714) 리덕스 툴킷 기본 세팅 (0) | 2023.07.14 |
|---|---|
| 230713) json-server를 유지하는 동시에 yarn start하기 (0) | 2023.07.13 |
| 230629) <Header> position:fixed 의 경우에 <body> 컨텐츠 hover에 animation, transform 적용시 튀어나옴 현상 (0) | 2023.06.29 |
| 230627) localStorage로 객체를 저장하고자 할 때 방법 (0) | 2023.06.27 |
| 230621) 화살표 함수 사용할 경우 return문과 중괄호{}의 생략 (0) | 2023.06.21 |