[React Native] 리액트 네이티브에서 커스텀 폰트 일괄 적용하기

보통 앱을 제작할 때에는 fontFamily 스타일 특성을 이용해 기본 폰트가 아닌 커스텀 폰트를 사용한다.
이번 글에서는 커스텀 폰트로 fontFamily를 사용하는 방법과 프로젝트에 일괄적으로 폰트를 적용하는 방법을 적어 보겠다.

우선 폰트 파일이 필요하다. 폰트 파일은 일반적으로 ttf, otf 확장자를 사용하는데, otf는 안드로이드에서도 적용이 되는 반면 ttf는 ios에서 적용이 안되는 경우가 있으니 가능한 otf를 사용하자.

Google Fonts 사이트에서 무료 폰트 파일을 다운로드할 수 있다.

 

1. src/assets/fonts 폴더에 폰트 파일을 넣는다.

 

주의할 점은 이 폰트 파일의 이름을 그대로 사용하면 안 된다는 것이다.
안드로이드의 경우 폰트 파일을 찾을 때 파일명을 참조하지만 ios의 경우 PostScript name을 참조한다고 한다. 즉 PostScript name을 찾아야 하는 것이다.
맥북에 폰트를 직접 설치하지 않고 postscript name을 찾아내는 방법을 알아내고 싶었지만...찾지 못했다.

폰트 파일을 다운로드 후 더블클릭하면 서체 관리자에서 미리보기 창이 열린다. 여기서 설치해도 괜찮고, 혹은 그냥 서체 관리자 앱을 열고 폰트 파일을 드래그 - 드롭해주어도 설치가 된다.
설치 후 해당 폰트를 클릭, 오른쪽 위 i 창을 통해 사이드바를 연 후 식별자 - PostScript 이름을 복사해서 사용해야 한다.

 

이때 폰트 파일명이 ffN이고 postscript name이 psn이라면 코드에서는
fontFamily: Platform.OS == ‘iOS’ ? ‘psn’ : ‘ffN’
이렇게 써야 하므로 복잡하다. 고로 한번에 쓸 수 있게 폰트 파일명을 postScript name으로 변경하는 것을 추천한다.

 

 

2. 프로젝트 루트 경로에 react-native.config.js 파일을 만들고 아래 코드를 입력한다.

 

3. 콘솔에 다음 명령어를 실행한다.

npx react-native-asset

 

이때 react-native-asset 모듈이 설치되어 있지 않다면 설치하겠냐고 묻는다. 설치하겠다고 답한다.

react-native-asset 모듈은 자동으로 android와 ios에 나눠서 폰트 파일과 설정을 추가해준다.
텍스트에 폰트를 적용하기 위해서는 아래 코드처럼 fontFamily를 사용하면 된다.

 

<Text style={{fontFamily: 'KoPubWorldBatangPL'}}>This is my Text</Text>

---

다만 이렇게 하면 매번 Text를 사용할 때마다 fontFamily를 설정해야 한다는 번거로움이 있다.
보통 앱에서는 1-2가지의 폰트를 사용하는데 매우 비효율적일 것이다.

 

이를 방지하기 위해 커스텀 Text 컴포넌트를 제작한다.

 

 

/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Text as RNText, TextProps} from 'react-native';

export interface TextPropsCustom extends TextProps {
  children: React.ReactNode | React.ReactNode[] | string;
}

const Text: React.FC<TextPropsCustom> = ({children, style, ...props}) => {
  return (
    <RNText
      style={[{color: 'black', fontFamily: 'KoPubWorldBatangPL'}, style]}
      {...props}>
      {children}
    </RNText>
  );
};

export default Text;

기기별, 설정별 기본 글씨 색도 달라질 수 있기 때문에 설정해주었다.

 

앞으로 앱 내 Text 컴포넌트를 사용할 때 react-native에서 import한 컴포넌트를 사용하지 말고, 해당 컴포넌트를 import해서 사용하면 된다.

이때 주의할 점은 컴포넌트에서 사용하는 스타일, 즉 폰트와 색상을 지정해준 style 속성보다 상속받은 style 속성을 더 뒤쪽에 놔야 한다는 것이다.
그래야 이 컴포넌트를 사용할 때 그 파일에서의 스타일 속성을 통해 다른 fontFamily 또는 색상 등을 설정해줄 수 있다.

가끔 ios에서는 잘 적용이 되는데 android에서만 굵기 적용이 안되는 경우가 있다.
필자처럼 굵기별로 Bold, SemiBold, Regular, Light 등 폰트 파일이 나누어져 있는 경우에는 fontWeight를 설정하면 폰트 적용에 문제가 생길 수도 있다. 참고하자.