front-end/react native

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

MOOB 2022. 1. 18. 18:04

 

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

google 웹폰트 다운받기

리엑트 네이티브에서 사용하고자 하는 폰트를 다운로드 해야 합니다. 저는 앱의 header 에 적용할 볼드한 픈트를 사용하고 싶어서 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 에는 적용이 안되네요. 왜일까요?)

 

저작자표시