[React-Native]React-Native에서 커스텀 폰트 사용하기 (window)

일반적인 웹 프로젝트에서 웹 폰트 혹은 폰트파일을 이용하여 프로젝트에 적용시키는건 정말 쉬웠습니다.

근데 RN을 혼자 또 공부하면서 바로 적용하려다보니 웹이랑은 다르게 조금 번거로움이 있어서

나중에도 자주 쓰게 될 것 같아 기록해두려고 합니다.

 

1. Font File 확장자는 .ttf

프로젝트를 진행할 때 웹에서는 .otf나 .woff 를 사용했는데 RN에서는 .ttf는 Androids나  IOS등과 같이 다양한 플랫폼에서 지원이 되므로 .ttf 확장자를 사용하자...

 

2. Font File 위치

일반적인 웹 프로젝트에서 폰트파일은 해당 프로젝트 위치에 넣고 css 파일에 각 font-weight 별로 스타일을 지정한 후 import 시켜서 간단하게 사용했는데 RN에서는 조금 다르다. 

먼저 RN 프로젝트 최상단에 assets/fonts 폴더구조를 만든 후 해당 위치에 사용 할 폰트파일을 넣어줍니다.

 

위의 사진과 같이 사용 할 폰트파일들을 프로젝트 내에 위치시켜주기!

 

3. Project Build

해당 위치에 사용할 폰트파일을 위치했다면 이제는 다시 프로젝트를 실행시켜주면 됩니다!

그러면 자동으로 프로젝트 내의 android 폴더에는 폰트파일이 복사, ios 폴더에는 폰트설정이 자동으로 추가 된 것을 확인할 수 있습니다.

 

android의 경우는 assets 폴더부터 복사되었고

ios 의 경우는 root/ios/[프로젝트명]/Info.plist  파일에 해당 폰트 설정이 추가 되어있습니다.

하지만 저는 아직 ios 디버깅을 해내지 못해서 안드로이드 부분만 적용이 되는 것만 확인이 가능했습니다.

 

4. 폰트 적용하기

react-native에서 font-family를 적용하는 방법은 간단합니다. 

사용 할 폰트파일명에서 확장자를 제외한 후 fontFamily를 주면 됩니다.

하지만 전 이렇게 인라인 스타일이나 각 컴포넌트별론 StyleSheet를 주기가 싫어서 공통 컴포넌트 작업을 진행했습니다.

먼저 Font.tsx 라는 common 컴포넌트를 만든 후 상위 컴포넌트에서 필요로 하는 값들 (text, fontSize, fontWeight, color)을 props 으로 받아 와 사용할 수 있도록 작성했습니다.

 

 

 

위의 사진과 같이 공통 컴포넌트를 작성 한 후 <Font color={'#222222'} size={16} weight={'light'} txt={'내용'}/>

이런식으로 글을 보여줄 부분에 해당 컴포넌트를 사용하면 됩니다!

 

 

잘못된 부분 지적, 좀 더 나은 방법 댓글은 언제나 감사합니다.