React, styled-components 환경에서 폰트 적용하기

개요

styled-components로 정의한 font-face에서 폰트 파일을 인식하지 못하는 문제가 발생하였다.

문제가 됐던 방법과 해결 방법을 기록해 보았다.

 

1. font-face url에 주소 지정

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  @font-face {
    font-family: 'Noto Sans KR';
    font-weight: normal;
    font-style: normal;
    src: local('Noto Sans Regular'),
    local('NotoSans-Regular'),
    url('./NotoSansKR-Regular.woff') format('woff');
  }
`;

폰트 경로에 문제는 없었지만, 네트워크 탭을 확인하면 'You need to enable JavaScript to run this app.' 문구가 노출되고 폰트 적용이 되지 않았다.

정확한 이유는 알 수 없었지만 컴파일될 때 폰트 인식을 못하는 것 같다.

 

2. import font file

Font file을 import 해보았지만 또 오류가 발생했다.

'Cannot find module './NotoSansKR-Regular.woff' or its corresponding type declarations.'

Typescript를 사용하는 프로젝트의 경우 Typescript가 컴파일할 때 폰트 파일의 타입을 알지 못해서 발생하는 오류라고 한다.

import { createGlobalStyle } from 'styled-components';

import NotoSansRegularWOFF from './NotoSansKR-Regular.woff';

export default createGlobalStyle`
  @font-face {
    font-family: 'Noto Sans KR';
    font-weight: normal;
    font-style: normal;
    src: local('Noto Sans Regular'),
    local('NotoSans-Regular'),
    url(${NotoSansRegularWOFF}) format('woff'),
  }
`;

 

Typescript가 폰트 타입을 알 수 있도록 Declation File을 추가해 주자.

image 등 다른 확장자도 추가할 수 있기 때문에 src/types 폴더를 만들어서 font.d.ts를 추가해 주었다.

// font.d.ts
declare module '*.ttf';
declare module '*.woff';
declare module '*.woff2';

 

참고 자료

https://dev.to/alaskaa/how-to-import-a-web-font-into-your-react-app-with-styled-components-4-1dni