[React Native] 0.70버전 custom font 적용하기 (react-native-cli)

이번 글에서는 react native 현재 최신 버전인 0.70.1 버전에서 custom font 적용하는 방법을 포스팅하려고 합니다.

우선 프로젝트를 생성하고 App.js 파일을 수정합니다.

npx react-native init AwesomeProject

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

const App = () => {
  return (
    <View style={styles.view}>
      <Text style={styles.text}>hello world!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  view: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  text: {
    fontSize: 24,
  },
});

export default App;

이렇게 작성하시면 다음과 같은 화면이 나옵니다.

 

이제 custom font를 적용해 보겠습니다.

저는 Google Fonts 사이트에서 Oswald라는 폰트를 적용해 보겠습니다.

https://fonts.google.com/specimen/Oswald

Google Fonts: Oswald

사이트에서 폰트를 다운받으시고 프로젝트루트경로/assets/fonts에 폰트 파일을 넣습니다.

 

그 다음 프로젝트 루트 경로에 react-native.config.js 파일을 만들고 다음과 같이 작성합니다.

module.exports = {
  assets: ['./assets/fonts/'],
};

그 다음 

npx react-native-asset

을 입력하면 알아서 android와 ios에 폰트 파일과 설정을 추가해줍니다.

이제 텍스트에 추가한 폰트를 적용해 봅시다.

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

const App = () => {
  return (
    <View style={styles.view}>
      <Text style={styles.text}>hello world!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  view: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  text: {
    fontSize: 24,
    fontFamily: 'Oswald-Regular',
  },
});

export default App;

바로 적용이 되지 않네요.

프로젝트를 다시 실행해봅시다.

추가한 폰트가 모두 잘 적용되는 것을 확인할 수 있습니다.

 

 

간단하게 React Native에 custom font를 추가하는 방법을 알아봤습니다.

아이폰에서는 테스트해보지 못했지만 잘 나올거라고 생각합니다 ㅎ.ㅎ

그럼 모두 즐거운 개발하시기 바랍니다~

 

 

대전용달

형사변호사 성범죄전문변호사