[react native] 리엑트 네이티브에 커스텀 폰트 넣는 방법

 

리엑트 네이티브를 배우기 시작하면서, 나도 FE 개발자라고 디자인은 내가 원래 하고싶었던 대로 바꾸면서 하고 있는데 아무래도 기본 폰트는... 진짜 쓰기 싫다. 적어도 구글 웹폰트정도는 사용할 수 있었으면 좋겠다는 생각에 알아본 내용을 정리한다.

google 웹폰트 다운받기

리엑트 네이티브에서 사용하고자 하는 폰트를 다운로드 해야 합니다. 저는 앱의 header 에 적용할 볼드한 픈트를 사용하고 싶어서 Anton 폰트를 사용하기로 했습니다.

• Anton : https://fonts.google.com/specimen/Anton

뻘소린데, 저는 안톤 폰트를 진짜 좋아하는 것 같습니다. 딱히 이걸 선택하자는 마음이 없어도 꼭 강조 표시하는 문구는 전부 얘 쓰는 것 같아요.

우측의 select this style을 클릭해 줍니다.

 

 

그러면 오른쪽에 다운로드 버튼이 생길텐데 클릭해서 ttf 파일을 다운로드 해줍니다.

 

 

저는 expo 환경에서 react native 앱 개발 작업을 수행하고 있기 때문에 이를 기준으로 폰트 설치 방법을 알려드리도록 하겠습니다.

로컬에 폰트 위치시키기

그 다음 폰트를 assets/fonts/ 에 위치시켜 준 후, package.json 파일에 다음 코드를 넣어 줍니다.

"rnpm": {
    "assets": [
      "./assets/fonts"
    ]
  }

그 다음 expo-fonts 를 활용하여 외부 폰트를 불러올 수 있도록 해 줄 것입니다.

npm install expo-font

설치가 완료 되었다면 App.js 파일에 다음과 같은 코드를 추가하면 불러올 준비는 완료됩니다.

import * as Font from 'expo-font';

이제 외부 폰트 경로를 설정해 줍니다.

Font.loadAsync({
  anton: require('./assets/fonts/anton.ttf'),
});

그 다음은 CSS를 사용할 때처럼 fontFamily: 'anton' 이라고 사용할 곳에 위치시켜주시면 됩니다. (다만 사용해본 결과 실제 <Text> 위의 View 에는 적용이 안되네요. 왜일까요?)