Blog.

[RN] 폰트 적용

준비물폰트 스타일 세팅직접 적용iOSAndroid라이브러리
리액트 네이티브 프로젝트를 하면서 폰트를 적용해야 하는 상황이 생겨 OS 별로 직접 적용하는 방법과 라이브러리를 통해 한 번에 적용하는 방법, 총 2가지 방법을 통해 적용해보려고 한다.

준비물

❗
폰트 굵기와 형식을 고려해서 2가지 폰트를 적용해보려고 한다.
 
  1. 넥슨 배찌체 (OTF)
      2. NEXON Brand Identity Guide
      넥슨은 항상 참신하고 함께 하는 재미를 통해 즐거움에 대한 신뢰를 주는 브랜드입니다
      NEXON Brand Identity Guide
      https://brand.nexon.com/ko/ci-brand-guidelines/typeface#section-bazzi
      NEXON Brand Identity Guide
  1. 동글체 (TTF)
      2. Dongle - Google Fonts
      Dongle(동글) is a rounded sans-serif typeface for display. It is a modular Hangeul with the de-square frame, creating a playful and rhythmic movement. The name, D
      Dongle - Google Fonts
      https://fonts.google.com/specimen/Dongle?subset=korean&noto.script=Kore
      Dongle - Google Fonts

폰트 스타일 세팅

정상적인 폰트 적용을 확인하기 위해 CustomFont 컴포넌트를 생성하였다.

직접 적용

iOS

  1. 우선 iOS 환경에서 OTF 형식의 폰트를 적용하기 위해서 해당 OTF 폰트의 이름을 서체 관리자에서 확인할 수 있는 PostScript 이름으로 변경해준다. (TTF 형식만 적용하는 경우 생략 가능)
      2. notion image
  1. ios/Fonts 폴더 생성 후 폰트 파일 추가
      2. notion image
  1. ios/[프로젝트이름].xcodeproj 실행
      2. notion image
  1. [프로젝트] 우클릭 → Add Files to [프로젝트] 클릭
      2. notion image
  1. Font 폴더를 선택 / Create folder references / target 을 프로젝트로 지정
      2. notion image
  1. [프로젝트 - info] 탭으로 이동 후, Properties 리스트에서 우클릭 후 Add Row 클릭
      2. notion image
  1. 추가 후 Key 값을 Fonts provided by application 로 지정
      2. notion image
  1. Fonts provided by application 에서 + 버튼을 통해 폰트를 추가
      2. notion image
  1. 적용 결과 이미지
      2. notion image

Android

  1. android/app/src/main/assets/fonts 에 폰트 파일을 추가
      2. notion image
  1. 적용 결과 이미지
      2. notion image

라이브러리

react-native-asset 라는 라이브러리를 사용하여 폰트를 적용할 것이다.
 
  1. 폰트를 관리할 폴더를 생성 후 사용할 폰트 파일 추가 (eg. src/assets/fonts)
      2. (해당 예제에서는 폰트 분리를 명확하게 하기 위해서 폴더를 하나 더 만들어서 관리하였다.)
      notion image
  1. react-native.config.js 파일 생성 후 코드 작성
    1. 터미널에 명령어 실행
        2. notion image
    1. 적용 결과 이미지
        2. notion image
     
     
    개인적으로 라이브러리를 통해 폰트를 적용하는 방법이 하나의 fonts 폴더에서 폰트를 더 빠르고 간편하게 관리할 수 있기 때문에 좋은 방법이라고 생각한다.
    하지만 직접 적용하는 것도 알고 있어야 추후에 발생하는 이슈에 대해 대응할 수 있을 거라고 생각하기 때문에 모든 방법을 알아둬야 된다고 생각한다.
     
     
    참고
    Add custom fonts (Google Fonts) to React native(>= 0.70)
    Here, we will know how to add custom fonts to our react native app. Go to Google Fonts website and...
    Add custom fonts (Google Fonts) to React native(>= 0.70)
    https://dev.to/abhidatta0/add-custom-fonts-google-fonts-to-react-native-070-1773
    Add custom fonts (Google Fonts) to React native(>= 0.70)
    RN(Reacct Native)에서 커스텀 폰트 사용하기
    RN(React Native) 프로젝트에서 커스텀 폰트를 적용하고 사용하는 방법에 대해서 알아봅시다.
    RN(Reacct Native)에서 커스텀 폰트 사용하기
    https://dev-yakuza.posstree.com/ko/react-native/react-native-custom-font/
    RN(Reacct Native)에서 커스텀 폰트 사용하기