RN 폰트 추가하기

서론

RN으로 프로젝트를 진행하면서 제일 처음 궁금했던 점이다.
RN은 html 파일도 없고, css 파일도 만들지 못하는데 어떻게 폰트를 적용할까? 라는 생각이 들었고, 검색해보니 expo 공식문서에 자세히 나와있었다.
https://docs.expo.dev/develop/user-interface/fonts/

폰트 적용 방법

RN 프로젝트에 커스텀 폰트를 적용하는 방법은 2가지가 있다.
1. assets/fonts에 폰트 파일을 추가하는 방법
2. Google Font 패키지를 설치하는 방법
나는 첫 번째 방법인 assets에 폰트 파일을 추가하는 방법으로 진행을 하였다.

폰트 적용 설정

1. expo-font 설치

npx expo install expo-font

2. _layout.tsx 설정

const [loaded, error] = useFonts({
  Pretendard: require('../assets/fonts/Pretendard-Medium-subset.otf'),
  'Pretendard-Bold': require('../assets/fonts/Pretendard-Bold-subset.otf'),
});
if (!loaded && !error) return null;

3. 폰트 적용

// 인라인
<Text style={{ fontFamily: 'Pretendard-Bold' }}>Pretendard Bold</Text>

// styled-components
const Text = styled.Text`
  font-family: 'Pretendard';
`;

TTF 보다 OTF

expo 공식문서에서는 otf 파일이 ttf 파일이 용량이 더 작고, 때로는 otf가 렌더링이 더 잘되기 때문에 otf 사용을 지향하라고 나와있습니다.

How to choose between OTF and TTF
If the font you're using have both OTF and TTF versions, prefer OTF. The .otf files are smaller than .ttf files. Sometimes, OTF also renders slightly better in certain contexts.
출처: expo 공식문서

출처: expo 공식문서
저번 글에서 폰트 포맷 별 용량의 차이를 비교해 보았었다.
otf > woff > woff2 순으로 용량이 작기 때문에 woff2를 사용하고 싶어도 android에서 지원을 하지 않는다는 문제가 있다.
따라서 RN 프로젝트에서는 OTF 파일을 사용하는 것이 좋을 것 같다!