Search

Expo에 커스텀 폰트 추가하기

Tags
Frontend
Date
2024/10/14

1. 개요

디자인 요구 사항 중 하나인 Pretendard 폰트를 개발 중인 Expo 앱에 적용해보려고 합니다.

2. Setup

먼저 다음 링크를 통해 폰트를 다운로드 받아 줍니다. Pretendard 다운로드
압축 파일을 다운로드 받게 되는데, 압축 해제 후 Pretendard-Medium.otfassets/fonts/ 로 복사해줍니다.
다음으로 라이브러리 설치를 진행해야 합니다.
$ npx expo install expo-font
Shell
복사
expo-font 라이브러리를 사용하여 애플리케이션에서 커스텀 폰트를 로딩하고 이를 적용할 수 있습니다.
라이브러리 설치 후 app.json에 이를 명시할 필요가 있습니다.
{ "expo" : { "plugins" : [ ["expo-font", { "fonts" : ["./assets/fonts/Pretendard-Medium.otf"] } ] ] } }
JSON
복사
적용된 폰트는 다음과 같이 사용 가능합니다.
export default function App() { const [isFontLoaded] = useFonts({ Pretendard: require('@/../assets/fonts/Pretendard-Medium.otf'), }) if(!isFontLoaded) { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <ActivityIndicator size="large" /> </View> ); } ... const styles = StyleSheet.create({ buttonText: { color: colors.BLACK, fontSize: 16, fontFamily: 'Pretendard' }, });
JavaScript
복사

Reference