expo - custom font 적용하기

expo에서는 쉬운 폰트 적용 방법을 제공하고 있다.

 

1. expo-font 모듈 다운로드

터미널에 명령어를 입력한다.

npm install expo-font

 

2. expo-font 모듈을 import 한다

import * as Font from 'expo-font';

 

3. custom font파일을 저장한다.

assets/fonts 경로를 만들어 파일을 저장해둔다

 

4. font 가져오기

const getFonts = async () => {
    await Font.loadAsync({
      Cafe24Dangdanghae: require("../assets/fonts/Cafe24Dangdanghae.ttf"),
    });
  };

내가 사용한 폰트 이름은 Cafe24Dangdanghae였다. Font.loadAsync 를 이용해 폰트를 가져온다.

font를 가져오는 과정은 시간이 걸리고, 가져온 후에 화면 랜더링이 이뤄져야 하기 때문에 await를 이용한다.

 

(AppLoading을 사용하면 Loading하는동안 폰트를 가져오도록 할 수 있다.)

import React, { useState } from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
 
export default function App() {
    const [isReady, setIsReady] = useState(false);
 
    const getFonts = async () => {
        // 생략
    }
 
    return isReady ? (
        // 앱 구성 컴포넌트
    ) : (
        <AppLoading
            startAsync={getFonts}
              onFinish={() => setIsReady(true)}
              onError={() => {}}
        />
      );
}

 

5. font 사용하기

const Title = styled.Text`
  font-family: "Cafe24Dangdanghae";
`;

style에서 font-family에서 가져온 폰트 이름을 지정하면 된다.

 

 

참고한 사이트

https://rhapsodist-blog.netlify.app/blog/2020/03/04/react_native_custom_font/index

Custom fonts 추가하기

https://blog.naver.com/PostView.naver?blogId=qkrzzang13&logNo=221961456571&parentCategoryNo=&categoryNo=23&viewDate=&isShowPopularPosts=true&from=search 

[ReactNative]expo 외부 폰트 적용하기/외부 폰트 경로 설정 - macos / vscode