All Articles

커스텀 폰트 사용하기

리액트 네이티브(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을 추가하고 글꼴 파일이 있는 경로를 입력합니다.

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


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

$ react-native link


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

    	<key>UIAppFonts</key>
    	<array>
    		<string>vincHand.ttf</string>
    	</array>

React Native Styles

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

    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에서 찾을 수 있습니다.


* * *

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


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

Published 24 Feb 2019

안피곤의 블로그입니다.