-
React Native에서 Custom Font 적용하기React Native 2021. 7. 29. 14:54728x90
해당 글은 일반 CLI를 이용해 생성된 프로젝트에서는 안 되며, Expo나 Expo를 Eject한 프로젝트에서만 적용되는 방법입니다.
먼저 사용하려는 Font의 종류에 따라 설명하자면, google-font의 경우 expo-google-font를 이용하여 가장 손쉽게 사용할 수 있다.
나는 내가 가장 많이 사용하는 Noto Sans KR을 기준으로 설명하겠다.
expo install @expo-google-fonts/noto-sans-kr expo-font expo-app-loading
import React from 'react'; import { Text, View } from 'react-native'; import { useFonts, NotoSansKR_100Thin, NotoSansKR_300Light, NotoSansKR_400Regular, NotoSansKR_500Medium, NotoSansKR_700Bold, NotoSansKR_900Black, } from '@expo-google-fonts/noto-sans-kr'; export default () => { let [fontsLoaded] = useFonts({ NotoSansKR_100Thin, NotoSansKR_300Light, NotoSansKR_400Regular, NotoSansKR_500Medium, NotoSansKR_700Bold, NotoSansKR_900Black, }); if (!fontsLoaded) { return null; } else { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text style={{ fontSize:24, fontFamily: 'NotoSansKR_100Thin', }}> Noto Sans KR Thin </Text> </View> ); } };
해당 종속성 들을 다운 받은 뒤 아래와 같이 font를 불러와 주고 font를 불러오는 동안 loading을 걸어주는 걸로 간단하게 끝이 난다.
다음은 google-font가 아닌 font를 이용할 때 방법이다.
expo install expo-font expo-app-loading
import React from 'react'; import { Text, View } from 'react-native'; import AppLoading from 'expo-app-loading'; import { useFonts } from 'expo-font'; export default props => { let [fontsLoaded] = useFonts({ 'Inter-Black': require('./assets/fonts/Inter-Black.otf'), }); if (!fontsLoaded) { return <AppLoading />; } else { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text style={{ fontFamily: 'Inter-Black', fontSize: 40 }}>Inter Black</Text> <Text style={{ fontSize: 40 }}>Platform Default</Text> </View> ); } };
위와 같이 font를 다운받아 준비한 뒤 해당 font를 expo-font의 useFonts를 이용하여 불러와 사용한다.
'React Native' 카테고리의 다른 글
react-native-async-storage 그만 사용하기(feat. react-native-mmkv) (0) 2023.08.18 React Native WebView Google Login Authorization Error 403: disallowed_useragent Error 해결법 (0) 2022.03.23 React Native에서 SVG 이미지 사용하기 (0) 2021.07.22 앱 기획부터 출시까지(일기장) - 2 (종속성 설치 및 설정들) (0) 2021.07.22 React Native에서 이미지 import로 불러오기 (0) 2021.07.21