React Native : Custom Font 설정하기

 

 

사이드 프로젝트를 개발하던 중에 기본적으로 제공하는 Font가 아닌 Custom Font를 적용해야 할 일이 생겼습니다. 

 

한번 이번 기회에 까먹지 않기 위해서 React Native 에서 Custom Font를 설정하는 방법에 대해서 정리해 보도록 하겠습니다.

 

 

Android에서 설정하기

안드로이드에서 설정은 생각보다 간단합니다.

 

1) android/app/src/main/assets/fonts 폴더를 생성합니다.

2) 생성한 폴더에 폰트파일들을 추가합니다.

3) 이후 안드로이드를 다시 빌드합니다. (npx react-native run-android)

 

 

IOS에서 설정하기

 

1) ios 폴더에 fonts 폴더를 생성합니다. 이후 해당 폴더에 폴더에 폰트 파일들을 저장해놓습니다. 

2) xcode상에서는 fonts 폴더가 보이지 않으므로 아래와 같이 Add files to "현재 프로젝트" 를 통해서 fonts 폴더를 자신의 프로젝트로 추가해줍니다.

 

 

 

3) Info.plist 상에서 Fonts provided by application key 값을 입력후 각각의 font 파일들의 위치와 경로를 배열로 입력해 줍니다.

 

 

4) 이후 IOS 프로젝트를 다시 빌드해 줍니다. 이때 npx react-native start 와 같은 명령어로 metro 서버만 재실행되는 것이 아니라 npx react-native run-ios 와 같이 ios 빌드를 꼭 다시 해주셔야 제대로 적용됩니다. (저는 이 부분 때문에 엄청 삽질하였습니다.)

 

 

코드상에서 적용해보기

 

 

react native 상에서는 styles에서 fontFamily 위처럼 옵션을 통해 적용하면 됩니다.

 

이때 .ttf 를 뺀 폰트 이름까지만 넣어주어야 올바르게 동작합니다.

 

 

IOS 이슈 : Unrecognized font family 에러 해결

 

 

저는 위 설정대로 하였는데 위와 같이 IOS에서 제대로 폰트가 불러와지지 않는 문제가 있었습니다.

 

이유를 찾아보니 폰트의 PostScript 이름과 실제 제가 저장한 ttf 파일의 이름이 다른 경우에 IOS에서 해당 에러가 발생하는 것을 확인하였습니다.

 

알아보니 안드로이드의 경우 폰트 파일을 찾을 때 폰트파일명을 참조하지만 ios의 경우 PostScript 이름을 참조한다고 합니다.

 

 

Mac에서는 위와 같이 서체관리자를 통해 Postscript 이름을 확인하실 수 있습니다.

제 경우에는 기존의 tmonsori.ttf 파일을 TmonMonsoriBlack.ttf 파일로 변경 후 문제가 해결되었습니다.

 

 

 

맺음말

 

오늘은 React Native에서 폰트 사용법에 대해 간단히 정리해 보았습니다.

 

React Native는 하면 할수록 어려운 문제들도 많고 Android / IOS 설정을 동시에 적용해야 하는 문제가 많아서 공부를 많이 해야 할 것 같습니다.

 

앞으로도 React Native 쪽은 공부하면서 어려운 부분들을 하나씩 정리해 나갈 생각입니다. 

 

감사합니다.

 

 

 

 

참고 

 

[ React Native ] Fonts 설정 => https://velog.io/@tjdgus0528/React-Native-Fonts-%EC%84%A4%EC%A0%95

 

[RN]ios 커스텀폰트삽입 => https://velog.io/@jeong3320/RNios-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%8F%B0%ED%8A%B8%EC%82%BD%EC%9E%85