ReactNative 0.60 이상에서 커스텀 폰트를 사용하는 방법을 알아보겠습니다.
1. 폰트 파일을 준비하기
사용할 폰트의 otf파일을 준비합니다.
otf파일명은 각 폰트의 PostScript Name값과 동일하게 합니다.
ex) ‘PostScript name’값이 ‘NEXONLv1GothicOTFBold’인 폰트의 경우
파일명은 ‘NEXONLv1GothicOTFBold.otf’ 가 되어야합니다.동일하게 하지않으면 Text 컴포넌트의 fontFamily를 지정할때 Android, iOS 플랫폼별 분기를 해주어야합니다.
(Android에서는 파일명을 기준으로, iOS에서는 폰트의 PostScript name값을 기준으로 font-family를 불러오기때문입니다.)
2. 폰트파일을 프로젝트에 추가하기
RN 프로젝트에서 assets/fonts디렉토리를 생성하고 여기에 준비한 폰트파일을 붙여넣습니다.
3. asset파일 위치를 cli 설정파일에 추가하기
RN프로젝트 root 디렉토리에 react-native.config.js 파일이 없다면 생성하고 assets 속성을 추가합니다.
(이 파일은 @react-native-community/cli 의 설정파일입니다.)
module.exports = {
assets: ['./assets/fonts'],
};4. cli를 이용해서 폰트파일을 링크하기
아래 명령을 실행하면 폰트파일이 링크됩니다.
> react-native link
5. 이제 커스텀 폰트를 사용할 수 있습니다
Text 컴포넌트의 style props에서 fontFamily 속성을 사용해서 추가한 커스텀폰트를 설정할 수 있습니다.
참조: https://medium.com/@mehrankhandev/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
