Expo (React Native)에서 폰트 적용 및 설정 방법

Expo (React Native)에서 커스텀 폰트를 적용하고 설정하는 방법에 대해 알아봅니다.

expo 54.0.29
react-native 0.81.5
expo-font ~14.0.10

2025년 12월 13일

Expo (React Native)에서 커스텀 폰트를 적용하고 설정하는 방법에 대해 알아보겠습니다.

폰트는 예시로 pretendard 폰트를 사용하며, Expo의 expo-font 라이브러리를 활용하여 폰트를 로드하고 적용하는 방법을 설명합니다.

이미 Expo 프로젝트가 생성되어 있다고 가정합니다. 만약 프로젝트가 없다면, 다음 명령어로 새 Expo 프로젝트를 생성할 수 있습니다.

bash

npx create-expo-app@latest MyFontApp
cd MyFontApp

1. 폰트 파일 준비하기

먼저, 사용할 커스텀 폰트 파일(.ttf 또는 .otf)을 준비합니다. 예를 들어, assets/fonts 디렉토리에 Pretendard-Regular.ttf 파일을 저장합니다.

Expo 공식 문서에서는 .ttf 파일과 .otf 파일 모두 지원하지만 .otf 파일을 권장합니다.https://docs.expo.dev/develop/user-interface/fonts/#how-to-choose-between-otf-and-ttf

프로젝트 디렉토리 구조 예시

assets

fonts

Pretendard-Regular.otf

Pretendard-Medium.otf

Pretendard-SemiBold.otf

Pretendard-Bold.otf

2. expo-font 설치하기

Expo 프로젝트에서는 expo-font 라이브러리를 사용하여 폰트를 로드할 수 있습니다. 다음 명령어로 expo-font를 설치합니다.

bash

npx expo install expo-font

3. 폰트 로드 및 적용하기

이제 expo-font를 사용하여 폰트를 로드하고 적용하는 방법을 알아보겠습니다. app.json 파일을 열고 다음과 같이 수정합니다.

app.json에 추가 하는 이유는 빌드 시 네이티브 코드에 폰트가 포함되도록 하기 위함입니다.

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "android": {
            "fonts": [
              {
                "fontFamily": "Pretendard",
                "fontDefinitions": [
                  {
                    "path": "./assets/fonts/Pretendard-Regular.otf",
                    "weight": 400,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-Medium.otf",
                    "weight": 500,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-SemiBold.otf",
                    "weight": 600,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-Bold.otf",
                    "weight": 700,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-ExtraBold.otf",
                    "weight": 800,
                    "style": "normal"
                  }
                ]
              }
            ]
          },
          "ios": {
            "fonts": [
              "./assets/fonts/Pretendard-ExtraBold.otf",
              "./assets/fonts/Pretendard-SemiBold.otf",
              "./assets/fonts/Pretendard-Bold.otf",
              "./assets/fonts/Pretendard-Medium.otf",
              "./assets/fonts/Pretendard-Regular.otf"
            ]
          }
        }
      ]
    ]
  }
}

위 json 구조를 잘 참고하여 app.json 파일에 추가합니다.

이제 app 폴더의 layout.tsx 에서 폰트를 로드하고 적용하는 코드를 작성합니다.

4. 스플래시 스크린과 함께 폰트 로드하기

우선 먼저 expo-splash-screen을 설치 합니다.

bash

npx expo install expo-splash-screen

그 다음, layout.tsx 파일을 다음과 같이 작성합니다.

app/layout.tsx

import { Stack } from "expo-router";
import { useFonts } from "expo-font";
import { useEffect } from "react";
import * as SplashScreen from "expo-splash-screen";
 
// 이 부분은 앱이 로드될 때 스플래시 스크린을 자동으로 숨기지 않도록 설정합니다.
SplashScreen.preventAutoHideAsync();
 
export default function RootLayout() {
  const [loaded, error] = useFonts({
    "Pretendard-ExtraBold": require("../assets/fonts/Pretendard-ExtraBold.otf"),
    "Pretendard-Bold": require("../assets/fonts/Pretendard-Bold.otf"),
    "Pretendard-SemiBold": require("../assets/fonts/Pretendard-SemiBold.otf"),
    "Pretendard-Medium": require("../assets/fonts/Pretendard-Medium.otf"),
    "Pretendard-Regular": require("../assets/fonts/Pretendard-Regular.otf"),
  });
 
  useEffect(() => {
    if (loaded || error) {
      // 폰트가 로드되었거나 에러가 발생하면 스플래시 스크린을 숨깁니다.
      SplashScreen.hideAsync();
    }
  }, [loaded, error]);
 
  if (!loaded && !error) {
    return null;
  }
 
  return {
    //   ... 기타 설정 ...
  };
}

위 코드에서는 useFonts 훅을 사용하여 폰트를 비동기적으로 로드합니다. 폰트가 로드되기 전까지는 스플래시 스크린이 유지되며, 폰트가 로드되면 스플래시 스크린이 숨겨집니다.

이제 폰트가 정상적으로 로드되었으므로, 앱 내에서 해당 폰트를 사용할 수 있습니다. 예를 들어, Text 컴포넌트에서 다음과 같이 폰트를 적용할 수 있습니다.

app/page.tsx

import { Text, View } from "react-native";
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontFamily: "Pretendard-Bold", fontSize: 24 }}>
        Hello, Expo with Custom Font!
      </Text>
    </View>
  );
}

위 예시에서는 Pretendard-Bold 폰트를 사용하여 텍스트를 렌더링합니다.

이제 Expo (React Native)에서 커스텀 폰트를 적용하고 설정하는 방법을 알게 되었습니다.

팁

폰트 사용시 매번 인라인 style 또는 StyleSheet에 폰트 패밀리를 지정하는 대신, AppText와 같은 커스텀 텍스트 컴포넌트를 만들어 사용하는 방법도 있습니다. 이렇게 하면 코드의 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.

components/AppText.tsx

import { StyleSheet, Text, type TextProps } from "react-native";
 
// 폰트 weight 타입 정의
type Weight = "regular" | "medium" | "semibold" | "bold" | "extrabold";
 
const fontMap: Record<Weight, string> = {
  regular: "Pretendard-Regular",
  medium: "Pretendard-Medium",
  semibold: "Pretendard-SemiBold",
  bold: "Pretendard-Bold",
  extrabold: "Pretendard-ExtraBold",
};
 
export function AppText({
  style,
  weight = "regular",
  ...props
}: TextProps & { weight?: Weight }) {
  return (
    <Text
      {...props}
      style={[
        styles.base,
        { fontFamily: fontMap[weight], fontWeight: "normal" },
        style,
      ]}
    />
  );
}
 
const styles = StyleSheet.create({
  base: {
    // 공통 텍스트 스타일 있으면 여기 추가
  },
});

이제 AppText 컴포넌트를 사용하여 폰트를 쉽게 적용할 수 있습니다.

app/page.tsx

import { View } from "react-native";
import { AppText } from "../components/AppText";
 
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <AppText weight="bold" style={{ fontSize: 24 }}>
        Hello, Expo with Custom Font!
      </AppText>
    </View>
  );
}

이렇게 하면 폰트 관리가 훨씬 쉬워지고, 코드의 가독성도 향상됩니다.

이제 Expo (React Native)에서 커스텀 폰트를 효과적으로 적용하고 관리하는 방법을 알게 되었습니다.

Re coding! 🚀

Expo에서 TanStack Query(React Query)로 데이터 로딩 시 스플래시 화면 제어하는 방법

클라우드 플레어 R2에 이미지 업로드 하는 방법

Expo (React Native)에서 폰트 적용 및 설정 방법

Expo (React Native)에서 커스텀 폰트를 적용하고 설정하는 방법에 대해 알아봅니다.

expo 54.0.29
react-native 0.81.5
expo-font ~14.0.10

2025년 12월 13일

Expo (React Native)에서 커스텀 폰트를 적용하고 설정하는 방법에 대해 알아보겠습니다.

폰트는 예시로 pretendard 폰트를 사용하며, Expo의 expo-font 라이브러리를 활용하여 폰트를 로드하고 적용하는 방법을 설명합니다.

이미 Expo 프로젝트가 생성되어 있다고 가정합니다. 만약 프로젝트가 없다면, 다음 명령어로 새 Expo 프로젝트를 생성할 수 있습니다.

bash

npx create-expo-app@latest MyFontApp
cd MyFontApp

1. 폰트 파일 준비하기

먼저, 사용할 커스텀 폰트 파일(.ttf 또는 .otf)을 준비합니다. 예를 들어, assets/fonts 디렉토리에 Pretendard-Regular.ttf 파일을 저장합니다.

Expo 공식 문서에서는 .ttf 파일과 .otf 파일 모두 지원하지만 .otf 파일을 권장합니다.https://docs.expo.dev/develop/user-interface/fonts/#how-to-choose-between-otf-and-ttf

프로젝트 디렉토리 구조 예시

assets

fonts

Pretendard-Regular.otf

Pretendard-Medium.otf

Pretendard-SemiBold.otf

Pretendard-Bold.otf

2. expo-font 설치하기

Expo 프로젝트에서는 expo-font 라이브러리를 사용하여 폰트를 로드할 수 있습니다. 다음 명령어로 expo-font를 설치합니다.

bash

npx expo install expo-font

3. 폰트 로드 및 적용하기

이제 expo-font를 사용하여 폰트를 로드하고 적용하는 방법을 알아보겠습니다. app.json 파일을 열고 다음과 같이 수정합니다.

app.json에 추가 하는 이유는 빌드 시 네이티브 코드에 폰트가 포함되도록 하기 위함입니다.

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-font",
        {
          "android": {
            "fonts": [
              {
                "fontFamily": "Pretendard",
                "fontDefinitions": [
                  {
                    "path": "./assets/fonts/Pretendard-Regular.otf",
                    "weight": 400,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-Medium.otf",
                    "weight": 500,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-SemiBold.otf",
                    "weight": 600,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-Bold.otf",
                    "weight": 700,
                    "style": "normal"
                  },
                  {
                    "path": "./assets/fonts/Pretendard-ExtraBold.otf",
                    "weight": 800,
                    "style": "normal"
                  }
                ]
              }
            ]
          },
          "ios": {
            "fonts": [
              "./assets/fonts/Pretendard-ExtraBold.otf",
              "./assets/fonts/Pretendard-SemiBold.otf",
              "./assets/fonts/Pretendard-Bold.otf",
              "./assets/fonts/Pretendard-Medium.otf",
              "./assets/fonts/Pretendard-Regular.otf"
            ]
          }
        }
      ]
    ]
  }
}

위 json 구조를 잘 참고하여 app.json 파일에 추가합니다.

이제 app 폴더의 layout.tsx 에서 폰트를 로드하고 적용하는 코드를 작성합니다.

4. 스플래시 스크린과 함께 폰트 로드하기

우선 먼저 expo-splash-screen을 설치 합니다.

bash

npx expo install expo-splash-screen

그 다음, layout.tsx 파일을 다음과 같이 작성합니다.

app/layout.tsx

import { Stack } from "expo-router";
import { useFonts } from "expo-font";
import { useEffect } from "react";
import * as SplashScreen from "expo-splash-screen";
 
// 이 부분은 앱이 로드될 때 스플래시 스크린을 자동으로 숨기지 않도록 설정합니다.
SplashScreen.preventAutoHideAsync();
 
export default function RootLayout() {
  const [loaded, error] = useFonts({
    "Pretendard-ExtraBold": require("../assets/fonts/Pretendard-ExtraBold.otf"),
    "Pretendard-Bold": require("../assets/fonts/Pretendard-Bold.otf"),
    "Pretendard-SemiBold": require("../assets/fonts/Pretendard-SemiBold.otf"),
    "Pretendard-Medium": require("../assets/fonts/Pretendard-Medium.otf"),
    "Pretendard-Regular": require("../assets/fonts/Pretendard-Regular.otf"),
  });
 
  useEffect(() => {
    if (loaded || error) {
      // 폰트가 로드되었거나 에러가 발생하면 스플래시 스크린을 숨깁니다.
      SplashScreen.hideAsync();
    }
  }, [loaded, error]);
 
  if (!loaded && !error) {
    return null;
  }
 
  return {
    //   ... 기타 설정 ...
  };
}

app/page.tsx

import { Text, View } from "react-native";
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text style={{ fontFamily: "Pretendard-Bold", fontSize: 24 }}>
        Hello, Expo with Custom Font!
      </Text>
    </View>
  );
}

위 예시에서는 Pretendard-Bold 폰트를 사용하여 텍스트를 렌더링합니다.

이제 Expo (React Native)에서 커스텀 폰트를 적용하고 설정하는 방법을 알게 되었습니다.

팁

components/AppText.tsx

import { StyleSheet, Text, type TextProps } from "react-native";
 
// 폰트 weight 타입 정의
type Weight = "regular" | "medium" | "semibold" | "bold" | "extrabold";
 
const fontMap: Record<Weight, string> = {
  regular: "Pretendard-Regular",
  medium: "Pretendard-Medium",
  semibold: "Pretendard-SemiBold",
  bold: "Pretendard-Bold",
  extrabold: "Pretendard-ExtraBold",
};
 
export function AppText({
  style,
  weight = "regular",
  ...props
}: TextProps & { weight?: Weight }) {
  return (
    <Text
      {...props}
      style={[
        styles.base,
        { fontFamily: fontMap[weight], fontWeight: "normal" },
        style,
      ]}
    />
  );
}
 
const styles = StyleSheet.create({
  base: {
    // 공통 텍스트 스타일 있으면 여기 추가
  },
});

이제 AppText 컴포넌트를 사용하여 폰트를 쉽게 적용할 수 있습니다.

app/page.tsx

import { View } from "react-native";
import { AppText } from "../components/AppText";
 
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <AppText weight="bold" style={{ fontSize: 24 }}>
        Hello, Expo with Custom Font!
      </AppText>
    </View>
  );
}

이렇게 하면 폰트 관리가 훨씬 쉬워지고, 코드의 가독성도 향상됩니다.

이제 Expo (React Native)에서 커스텀 폰트를 효과적으로 적용하고 관리하는 방법을 알게 되었습니다.

Re coding! 🚀

Expo에서 TanStack Query(React Query)로 데이터 로딩 시 스플래시 화면 제어하는 방법

클라우드 플레어 R2에 이미지 업로드 하는 방법