ReactNative - Custom Font 사용하기

ReactNative - Custom Font 사용하기

이 글은 CRNA(create-react-native-app)기반 프로젝트에서 폰트사용하는 방법이며

기존 ReactNative CLI 프로젝트는 How to add and remove custom fonts in React Native를 참고해주세요.

1. 폰트파일 프로젝트에 추가

사용할 폰트파일을 프로젝트 폴더내의 적당한 위치에 복사합니다.

보통은 ./assets/fonts 와 같은 이름으로 만듭니다.

주의사항, otf폰트를 사용하려고 했는데 해보니 오류가 발생합니다. otf인 경우 ttf로 변환해서 사용해야 합니다.

2. 폰트 로드

폰트를 사용하려면 해당 폰트가 로드가 되어야 합니다.

방법은 아래와 같이

Font모듈을 import한 후

import { Font } from 'expo';

폰트파일을 앱이 시작되는 부분에서 로드하면 됩니다.

Font.loadAsync({'폰트명': require('경로/파일명'),});

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

이렇게하고 fontFamily속성에서 추가한 폰트명을 설정해주면 바로 적용이 되면 좋겠는데..

안됩니다. 

이유는 loadAsync 메서드이름에서 알 수 있듯이 비동기라 render호출 이후에 로드가 완료될 수 있기 때문에

폰트가 정상적으로 표시되지 않습니다.

문서에서는 그냥 시스템폰트로 표시된다고 나오는데 개발모드에서 실행해보면 그냥 오류가 발생합니다.

그래서 이런 문제를 해결하기 위해 로드완료 여부 변수를 따로 두고 상태값에 따라 render처리를 따로 해주어야 합니다.

아래와 같이

import React from 'react';
import { Text, View } from 'react-native';
import { Font } from 'expo';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    
    // 폰트로딩이 완료되면 true로 변경
    this.state = {isReady: false};
  }

  async componentDidMount() {
    // await키워드를 붙여 비동기식으로 변경
    await Font.loadAsync({'fantasquesansmono-regular': require('./assets/fonts/fantasquesansmono-regular.ttf'),});
    
    // 폰트로드가 완료되어 true로 변경
    this.setState({ isReady: true });
  }

  render() {
    if (this.state.isReady) {
      return (
        <View>
          <Text style={{ fontFamily: 'fantasquesansmono-regular' }}>abcdefghijklmnopqrstuvwxyz0123456789ABCDEFG</Text>
          <Text>abcdefghijklmnopqrstuvwxyz0123456789ABCDEFG</Text>
        </View>
      );
    }
    else {
      return <View><Text>Loding...</Text></View>;
    }
  }
}

실행결과