React-Native Font 설정

1. 폰트 연결

• react-native-config.js 생성, 이후 아래와 같이 작성

    module.exports = {
      project: {
        ios: {},
        android: {},
      },
      assets: ['./app/assets/fonts'], // 폰트들이 모아져있는 공간
    };

• 이후 npx react-native link 입력 → 자동으로 android 와 ios에 연결이 됨

2. 주의 사항

• zeplin 에서 fontweight 를 Camel Case 이용하여 마지막에 덧붙인다.

  • 그 중에 기본 폰트는 접미사를 붙이지 않는다.

    ex) NatoSansKRBold, NatoSansKR

• 하지만 폰트 파일들을 다운로드 받으면 fontweight 를 - 로 되어있다

  • 그 중에 기본 폰트 파일은 -Regular 가 마지막에 붙어 있다.

    ex) NatoSansKR-Bold , NatoSansKR-Regular

• 이 지점을 해결하는 방법은 2가지가 있다.

  1. npx react-native-link 를 하기 전에 다운로드 받은 파일들의 fontweight 에 해당하는 부분을 CamelCase 로 고친다

     장점 : zeplin 에 있는 StyleSheet 을 그대로 복사 - 붙여넣기 해도 된다.

     단점: 초반에 매우 귀찮고, 잘못해서 링크 명령어를 치게되면, 1번 방법은 사용하지 못한다. 정확히는 이미 링크된 xcode 와 안드로이드 파일들을 다 뒤져서 삭제하고 다시 링크를 해야한다. (내가 그러고 있다.)

  2. 매번 폰트를 넣을 때 (fontFamily 를 작성할 때) 하이픈을 이용하여 바꾼다. 특히 기본 폰트는 -Regular 를 뒤에 작성해야 한다.

     장점 : 초반에 아무 생각없이 링크를 걸 수 있다.

     단점: 전체적인 개발 비용으로 따졌을땐, 훨씬 많은 타이핑을 요구하므로 비싸다. 매번 귀찮다는 이야기이다.

• 참고사이트
  • https://dev-yakuza.posstree.com/ko/react-native/react-native-custom-font/
  • https://zeallat94.medium.com/reactnative에서-커스텀-폰트-사용하기-b4b221d6a731