Custom fonts 적용

jiseong·2021년 3월 24일
0

reactNative

목록 보기
3/3
post-custom-banner

0.60이상 version에 해당하는 React Native에 Custom fonts를 적용하는 방법입니다.

1. .ttf 또는 .otf 형식의 원하는 fonts를 다운받습니다.

ex) https://www.woowahan.com/#/fonts
ex) https://www.fontspace.com/category/opentype

2. root project directory에서 assets/fonts 폴더를 만든 뒤 다운 받은 fonts들을 넣어줍니다.

3. root project directory에 react-native.config.js 파일을 생성하고 아래 코드를 적습니다.

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

4. 추가한 assets폴더를 아래 명령어를 이용하여 연결해줍니다.

>npx react-native link
또는
>yarn react-native link

5. app을 재실행 하여 아래와 같이 fontFamily에 적용할 font명을 적어주면 적용되어 나타납니다.

<View>
	<Text style={{fontFamily: "BMDOHYEON", fontSize: 60}}>배달의 민족</Text>
</View>
post-custom-banner

0개의 댓글