0%

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

리액트 네이티브(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에 복사됩니다. 그리고 iOSInfo.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에서 찾을 수 있습니다.


* * *

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


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


Originally posted on http://steemit.com