Custom fonts 추가하기

1. 개요

일반 web도 마찮가지지만 일반적으로 브라우저가 제공하는 폰트 ( font )가 아니라, 개인이 가지고 있는 font를 추가하는 것은 여간 귀찮은 일이 아니다. 실제로 적용이 안되는 경우도 많고, 에러도 자주 뜬다.

React 의 경우도 똑같은데, Expo에서 제공하는 font module을 사용하면 생각보다 간단히 custom font 가 적용가능하다.

2. Import

import * as Font from 'expo-font'

expo-font 에 존재하는 모든 function 을 Font라는 변수에 담았다.

3. Make Function

const getFonts = () => {
  return Font.loadAsync({
    'nunito-regular': require('./assets/fonts/Nunito-Regular.ttf'),
    'nunito-bold': require('./assets/fonts/Nunito-Bold.ttf')
  })
}

google의 nunito 폰트를 읽어오기 위해 Font.loadAsync 함수를 이용하여 로드 하고 있다. object의 key 에 해당 폰트에 이름을 부여할 수 있다.

4. Usage

const styles = StyleSheet.create({
    titleText: {
        fontFamily: 'nunito-bold'
    }
})

사용하는 법은 간단히 설정해놓은 object의 key값을 입력하면 된다.

5. Code

import * as Font from 'expo-font'

const getFonts = () => {
  return Font.loadAsync({
    'nunito-regular': require('./assets/fonts/Nunito-Regular.ttf'),
    'nunito-bold': require('./assets/fonts/Nunito-Bold.ttf')
  })
}

class App extends Component {
    render() {
        getFonts()
        return (
            <Text style={styles.titleText}>hello!!!!!!!</Text>
        )
    }
}

const styles = StyleSheet.create({
    titleText: {
        fontFamily: 'nunito-bold'
    }
})

6. 주의점

주의 할 점은 폰트에도 로딩 시간 이 걸린다는 것이다. 폰트를 로딩하는 중인데 컴포넌트가 마운트되지 않도록 주의하자.