코딩, 독서, 여행, 영화, 맛집

0%

[React Native] 커스텀 폰트 사용하기

작성일 Edited on In , Views: Disqus:

리액트 네이티브(React Native)에서 사용자 글꼴(Custom Fonts)를 사용하는 방법입니다.

출처: https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e


* * *

Assets에 글꼴 파일 복사하기

글꼴(Fonts) 파일을 루트에 있는 assets/fonts 폴더에 복사합니다.

Package.json 수정하기

이제 React Native에게 글꼴 파일이 있는 위치를 알려줘야 합니다. package.json파일에 rnpm을 추가하고 글꼴 파일이 있는 경로를 입력합니다.

1
2
3
4
5
"rnpm": ｛
    "assets": [
      "./assets/fonts/"
    ]
  ｝


그다음 React Native에게 글꼴 파일을 링크하도록 명령을 수행합니다 :

$ react-native link


이렇게 하면 Android의 경우에는 Font 파일이 android/app/src/main/assets/fonts에 복사됩니다. 그리고 iOS는 Info.plist 파일에 글꼴 참조가 추가됩니다. iOS 폴더의 Info.plist 파일을 열어보면 아래와 같은 내용을 찾아 볼 수 있습니다.

1
2
3
4
<key>UIAppFonts</key>
<array>
	<string>vincHand.ttf</string>
</array>

React Native Styles

React Native 스타일에 글꼴을 추가하는 방법입니다. 아래와 같이 fontFamily 속성에 글꼴 이름을 입력하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const styles = StyleSheet.create(｛
  container: ｛
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  ｝,
  welcome: ｛
    fontFamily: "vincHand", // here
    fontSize: 30,
    textAlign: "center",
    margin: 10
  ｝,
  instructions: ｛
    fontFamily: "vincHand", // here
    fontSize: 20,
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  ｝
｝);

 

스크린샷

Android iOS
Android

소스 코드

이 튜토리얼의 소스 코드는 GitLab에서 찾을 수 있습니다.


* * *

앱에 폰트를 추가하면 앱 용량이 매우 커지는 단점이 있습니다. 하지만 정말 원하는 폰트가 있다면, 폰트 용량을 줄여서 사용하는 방법이 있습니다. 폰트 용량 줄이는 방법은 아래 블로그에 잘 설명되어 있습니다.


여기까지 읽어주셔서 감사합니다.