React Native expo 폰트 변경하기

헷갈린다 헷갈려!

 

디자인에 진심인 나는 날씨 앱을 만들어보는데,

폰트를 너무너무 바꾸고 싶었다.

시작은 css에 첨부하던 것 처럼 간단하게 할 수 있을 줄 알았다.

생각보다 복잡했던 폰트 적용법을 기록으로 남겨보려고 한다.

 

리액트 네이티브로 커스텀 폰트를 적용하려면, 폰트의 파일이 필요하다.

대표적인 무료 폰트 사이트가 두 가지가 있는데, 이곳에서 원하는 폰트를 찾는다.

(혹은, 본인이 가지고 있는 파일을 사용해도 좋다.)

구글폰트

Google Fonts

눈누

눈누 - 상업용 무료한글폰트 사이트

 

1. assets파일에 fonts폴더를 만들어 사용하고 싶은 폰트 파일을 넣어준다.

 

2. 사용하고자 하는 파일에서 'expo-font' import 해오기

import * as Font from "expo-font";

expo 프로젝트 생성 시 기본으로 포함된 것으로 알고 있는데, 혹시 존재하지 않는다면 다음 명령어를 통해 설치해준다.

npm install expo-font

3. 폰트 로딩 상태값 만들어 주기

문서에는 방법대로 폰트 경로를 입력해 로딩해주면 된다고 하지만,

비동기 호출의 방법이기 때문에 렌더링 후에 폰트 로딩이 완료될 수도 있어서

폰트가 제대로 적용되지 않는 문제가 발생한다.

따라서, 이러한 문제를 해결하기 위해 폰트로딩 상태를 기본 false로 설정해 준 뒤,

useEffect함수로 폰트 로딩이 완료되면 로딩 상태를 true로 변경해주어 조건에 따라 사용하면 된다.

const [isReady, setIsReady] = useEffect(false);

useEffect(async () => {
    await Font.loadAsync({
      "fredoka": require("./assets/fonts/FredokaOne-Regular.ttf"),
      "cafe24": require("./assets/fonts/Cafe24Ssurround.ttf"),
    });
    setIsReady(true);
  }, []);

폰트 로딩의 기본 사용법은 다음과 같다.

Font.loadAsync({"폰트명": require("경로")});

4. 폰트 로딩 여부에 따라 적용해주기

해당 과정을 해주지 않았을 때는, 다음과 같은 경고가 뜨면서 폰트 적용이 제대로 되지 않았다.

console.error: "You started loading the font "폰트명", but used it before it finished loading.

대충 번역하자면 "폰트명"을 로드하기 시작했지만, 로드가 완료되기 전에 사용했다는 의미다.

그래서 나는 return부분에서 폰트가 로딩이 완료되면(= 폰트 로딩 상태 값이 true가 되면) 렌더 되도록 조건문을 작성해줬다.

return (
    <View style={styles.container}>
      {isReady && (
        <View style={styles.city}>
          <Text style={styles.cityName}>{city}</Text>
        </View>
      )}
    </View>
)

// 폰트 사용시 css font-family 적용법과 동일하게 사용하면 된다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0D0921",
  },
  city: {
    fontFamily: "fredoka",
    flex: 5,
    justifyContent: "center",
    alignItems: "center",
  },
  cityName: {
    fontFamily: "cafe24",
    color: "#fefefe",
    fontSize: 50,
    fontWeight: "600",
  },
});

해당 방법으로 폰트 적용 시,

초기 렌더링에 날씨정보를 받아오고, 폰트를 로딩해온 뒤

폰트 로딩이 완료되면, 날씨정보를 화면에 표시하도록 조건문을 작성했다.

그래서, 날씨 정보를 받아오는 중에 화면에 표시하던 "Loading..." 문자도 폰트를 성공적으로 적용할 수 있었다.

(물론 날씨 데이터를 요청해서 받아오는 것이 시간이 훨씬 많이 걸리기 때문에 가능했던 것 같고, 다른 상황의 경우라면 조건문의 위치나 내용을 다시 고려해봐야 할 것 같다.)