[React Native] 로컬 폰트를 추가해보자

이지민·2024년 8월 17일
0

ReactNative

목록 보기
7/12

1.문제 상황

figma를 이용해서 이쁘게 디자인을 마쳤다. (노력했다...)

다음과 같이 디자인을 했는데, 여기서 폰트를 이쁜거 쓴다고 apple기기의 기본 폰트로 알려진 pretendard를 썼다.

하지만, android는 pretendard를 지원하지 않는데, 어떻게 하지??

2.해결 방법

1. 우선 넣고자하는 폰트를 다운받는다.

2. 루트디렉토리/android/app/src/main/assets/fonts 디렉토리를 생성


fonts폴더에 다운받은 폰트를 넣어주면 된다.

3. 루트디렉토리/react-native.config.js파일 생성

// react-native.config.js
module.exports = {
  assets: ['./android/app/src/main/assets/fonts'], // 폰트 파일이 위치한 디렉토리
};

생성된 파일안에 다음과 같이 font를 저장한 경로를 넣어주면 된다.

4. 사용법

  import { StyleSheet, Text, View } from 'react-native';
   
   const App = () => {
     return (
       <View style={styles.container}>
         <Text style={{fontFamily: 'Pretendard-Black'}}>Pretendard-Black</Text>
         <Text style={{

사용할 떄는 다음과 같이 사용하면 된다.

3. 후기

다행히 에뮬레이터에서는 문제없이 돌아가는데, 배포하고 나서 테스팅할때도 잘돌아갔으면 좋겠다... 잘못하면 글꼴 다바꿔야해서 ㅠㅠ

profile
개발자가 되고싶어요

0개의 댓글