React Native에서 Custom Font 적용하기

해당 글은 일반 CLI를 이용해 생성된 프로젝트에서는 안 되며, Expo나 Expo를 Eject한 프로젝트에서만 적용되는 방법입니다.

 

먼저 사용하려는 Font의 종류에 따라 설명하자면, google-font의 경우 expo-google-font를 이용하여 가장 손쉽게 사용할 수 있다.

나는 내가 가장 많이 사용하는 Noto Sans KR을 기준으로 설명하겠다.

expo install @expo-google-fonts/noto-sans-kr expo-font expo-app-loading

import React from 'react';
import { Text, View } from 'react-native';
import {
  useFonts,
  NotoSansKR_100Thin,
  NotoSansKR_300Light,
  NotoSansKR_400Regular,
  NotoSansKR_500Medium,
  NotoSansKR_700Bold,
  NotoSansKR_900Black,
} from '@expo-google-fonts/noto-sans-kr';

export default () => {
  let [fontsLoaded] = useFonts({
    NotoSansKR_100Thin,
    NotoSansKR_300Light,
    NotoSansKR_400Regular,
    NotoSansKR_500Medium,
    NotoSansKR_700Bold,
    NotoSansKR_900Black,
  });
  
  if (!fontsLoaded) {
    return null;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text
          style={{
            fontSize:24,
            fontFamily: 'NotoSansKR_100Thin',
          }}>
          Noto Sans KR Thin
        </Text>
      </View>
    );
  }
};

해당 종속성 들을 다운 받은 뒤 아래와 같이 font를 불러와 주고 font를 불러오는 동안 loading을 걸어주는 걸로 간단하게 끝이 난다.

 

다음은 google-font가 아닌 font를 이용할 때 방법이다.

expo install expo-font expo-app-loading

import React from 'react';
import { Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';

export default props => {
  let [fontsLoaded] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>Inter Black</Text>
        <Text style={{ fontSize: 40 }}>Platform Default</Text>
      </View>
    );
  }
};

위와 같이 font를 다운받아 준비한 뒤 해당 font를 expo-font의 useFonts를 이용하여 불러와 사용한다.