React (+TypeScript, Styled-Component, ResetCSS) 프로젝트에 구글폰트 적용 안됨 및 해결법

시작하며

개발을 하다보면 구글 폰트를 이용하는 경우가 있다.

 

구글 폰트 홈페이지에서 원하는 폰트를 골라 import 했는데도 적용이 되지 않는 문제점이 있었다.

 

알고보니 그냥 import 하는 것으로는 해결되지 않고 다른 방법을 이용해야 정상적으로 사용할 수 있었다.

---

구글 폰트, React 프로젝트에 적용하기

만약 위의 폰트를 사용하기로 했다고 생각해보자.

 

기존의 방식과 다른 점은 import를 하는 것이 아니라 위의 Download 버튼을 이용해 해당 글자체 파일을 다운받아야 한다는 것이다.

 

다운받은 파일은 src/Fonts 안에 넣으면 된다.

원하는 글꼴들을 넣었다면 위의 모습이 될 것이다.

 

이후, 해당 글꼴들을 사용하기 위해 GlobalStyle을 만드는 파일에서 해당 폰트를 불러와야 한다.

본인의 경우, GlobalStyle을 정의하는 파일을 별도로 두었으며 경로는 src/Styles/GlobalStyles.ts이다.

 

위와 같이 import를 하게 되면 오류가 발생한다.

 

그럴때는 src 폴더 안에 fonts.d.ts 파일을 하나 생성하여 안의 내용은 아래와 같이 넣어준다.

declare module "*.ttf";

그러면 import문에서 생기는 오류가 사라지게 된다.

 

전체적인 디렉토리는 아래와 같은 형식이 될 것이다.

src
 ├─── Fonts
 │  ├── 원하는 폰트1.ttf
 │  └── 원하는 폰트2.ttf
 ├─── ...
 ├─── Styles
 │  └── GlobalStyle.ts
 ├─── App.tsx
 ├─── index.tsx
 ├─── fonts.d.ts
 └─── ...

(단, 위의 구조는 본인의 기준으로 나눈 디렉토리이므로 개인마다 다를 수 있다)

 

디렉토리가 어떤 형식이건 중요한 것은 원하는 폰트들을 별도의 디렉토리에 모아두고, createGlobalStyle 안에서 @font-face를 이용해 선언한 뒤, 원하는 곳에서 font-family를 통해 사용하는 것이다.

---

위의 과정을 통해 원하는 폰트를 사용하도록 설정했다면 원하는 곳에서 사용할 수 있게 된다.

 

특정 글꼴을 사용하고 싶은 곳에서 font-family를 통해 사용할 수 있다.