[React-Native] 폰트 설정 방법

React-Native로 앱을 개발하다보면 폰트를 변경해야할 때가 있습니다.

ios 와 android 에서 동시에 폰트적용을 하기 위해서는 아래와 같이 해야합니다.

폰트 설정 방법

1. 'react-native.config.js' 생성 및 작성

• 먼저 project 의 root directory 에 아래와 같이 파일을 작성해줍니다.

//react-native.config.js
module.exports = {
  project: {
    ios: {},
    android: {}, 
  },
  assets: ['./assets/fonts'], 
};

2. 글꼴을 담고있는 폴더를 생성

• project의 root 경로에 assets/fonts 폴더를 만들고 내부에 글꼴 파일(ttf 혹은 otf) 파일을 넣어둡니다.

3. assets 폴더를 각 플랫폼(iOS,android)에 연동

react-native 0.69 초과의 버전이라면
터미널 내 npx react-native-asset 명령어 입력
아니면
터미널 내react-native link 명령어 입력

• 위 1번 에서 작성한 react-native.config.js을 기반으로 assets을 각 플랫폼에 동기화하여 자동으로 적용되게 해줍니다.
  • ios: root/ios/[projectName]/info.plist 경로에서
    <key>UIAppFonts</key> 아래 넣은 폰트의 명이 입력되었는지 체크
  • android: root/android/app/src/main 내 assets/fonts폴더와 내부 폰트가 있는지 체크

* 만약 둘중 하나라도 없다면 수동으로 폰트를 적용시켜주어야합니다.

4. 다시 빌드하여 확인합니다.

에러 해결

1. ios 내 폰트 관련 에러 발생
   해결방안: assets/fonts 폴더내에 넣은 폰트의 이름을 서체 관리자의 'PostScript 이름' 과 동일하게 변경해줍니다.

2. android 내 폰트 미적용 발생
   해결방안: ios는 폰트가 적용되지만 android에서 적용되지 않는다면 코드 내 스타일에fontWeight가 적용되어 있는지 확인합니다.
   (*가끔 fontWeight 때문에 글꼴이 적용안되는 경우가 있다고 하네요)

reference

https://stackoverflow.com/questions/68441556/npx-react-native-link-dose-not-working-for-me

https://techblog.geekyants.com/adding-custom-fonts-a-complete-guide-react-native-060