2025.11.16. 기준

1. 폰트 파일 준비 및 추가
   사용할 폰트(tff, otf 등) 파일을 프로젝트 내 적절한 폴더(예: src/assets/fonts)에 추가합니다.

2. react-native.config.js 생성 및 설정

프로젝트 루트에 react-native.config.js

///react-native.config.js
module.exports = {
  assets: ['./src/assets/fonts'],
};

3.폰트 연결 명령 실행

터미널에서 npx react-native-asset 명령어를 실행하여 폰트를 iOS 및 Android 프로젝트에 연결합니다.

4. 폰트 적용
   fontFamily: 'Pretendard-Regular' fontFamily 속성을 통해 폰트 적용 가능

---

아래 글은 옛날 글

pretendard 폰트를 reactnative 프로젝트에 적용시켰다.

설정

1. /assets/fonts 폴더를 만들고 설정하고 싶은 폰트 파일을 위치시킨다. /assets/fonts/Pretendard-Medium.otf
2. root 폴더에
   //react-native.config.js 파일을 생성

//react-native.config.js
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ["./assets/fonts/"],
};

3. App.js에 아래 코드 추가

import * as Font from "expo-font";
...다른 코드 모두 생략
const fetchFonts = () => {
  return Font.loadAsync({
    "Pretendard-Medium": require("./assets/fonts/Pretendard-Medium.otf"),
  });
};
...
export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  useEffect(() => {
    const loadFonts = async () => {
      await fetchFonts();
      setFontsLoaded(true);
    };
    loadFonts();
  }, []);

  if (!fontsLoaded) {
    // 폰트가 로드되기 전에는 아무것도 렌더링하지 않음
    return null;
  }

  return (이하코드 생략

4. 사용하고자 하는 컴포넌트의 스타일 시트에 다음 작성
   fontFamily: "Pretendard-Medium",

참조

컴포넌트로 생성

컴포넌트로 생성하여 해당 폰트가 필요한 곳에는 컴포넌트를 import 해서 사용할 수 있도록 만들었다.

import React from "react";
import { Text } from "react-native";

const MediumText = (props) => {
  return (
    <Text
      {...props}
      style={{
        ...props.style,
        fontFamily: "Pretendard-Medium",
      }}
    >
      {props.children}
    </Text>
  );
};

export default MediumText;

참조

주의 사항

1. 폰트 적용이 안됨

<Text> 의 스타일에서 fontfamily를 설정해야한다.
react 에서처럼 상위 태그에 설정해놓으면 적용이 안된다.

<TouchableOpacity
    style={[styles.button, styles.boxShadow]}
    onPress={...}
      >
    <Text style={styles.buttonText}>외박 신청</Text>
</TouchableOpacity>

이런식으로 적용이 되있었는데 TouchableOpacity에 적용된 스타일에 폰트를 적용했더니 작동하지 않았다.
Text에 적용된 스타일에 폰트를 적용하지 작동했다.

2. 앱이 꺼지는 문제

font적용을 다 마쳤는데 휴대폰의 Expo 앱이 꺼져버려서 프로젝트 확인을 못하는 문제가 발생했다.
앱을 실행시키면 치명적인 문제가 있어서 중지되는 것 같았다.

해결

buttonText: {
    color: "black",
    fontFamily: "Pretendard-Bold",
    fontSize: 20,
    fontWeight: 100,
  },

스타일 시트에 설정한 fontWeight가 문제였다.
fontWeight를 지우자!