React native - custom font 적용과 발생했던 문제를 기록 - IOS

react native custom font 를 적용했던 과정과 발생했던 문제를 기록 합니다.

👉🏻 적용 방법

1. assets / fonts 에 폰트 추가 (assets 이라는 폴더를 만들면 된다)

2. 루트 경로에 react-native.config.js 생성

module.exports = {
  assets: ['./assets/fonts']
};

3. react-native link 실행

react-native link

4. ios/[프로젝트이름]/Info.plist 에 폰트 추가 되었는지 확인

5. xcode project info 탭에서 font 추가되어 있는지 확인

 

🧐 재빌드 했는데, 에러 발생

찾고 찾다가 다른 알엔 개발자분들에게 여쭈어 보니 폰트 파일명과 폰트 패밀리는 다른 것이니 폰트 패밀리명을 확인하라는 답변을 받았다.

🤔 폰트 패밀리 이름이랑 폰트 파일명은 다른거였다.

내가 쓰는 폰트 파일은 IM_Hyemin-Regular 였는데,

폰트 패밀리 이름(원래 이름) 은 IMHyemin-Regular 였다고 한다.

이걸 어떻게 확인 했는지 공유 하자면, 해당 폰트를 다운 받고, mac 의 서체 관리자 앱에서 모든 서체를 클릭 후 postScript 이름을 적용해서 해결했다.

 

그리고 아래 처럼도 찾을 수 있다고 알려주셨다.

 

🐰 적용 후 모습