FE

[RN] - ios font 적용

<ziny/> 2022. 7. 28. 19:01
728x90

1. 원하는 폰트를 다운로드한다 

2. /ios/fonts를 만들고 폰트 파일을 다 넣어준다. 

3. src/assets/fonts를 만들고 적용할 폰트 폰트를 전부 다 넣어준다 

4. 제일 상위에서 react-native.config.js 파일을 만들어준다 

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ["./src/assets/fonts"],
};

5. /ios/프로젝트파일/info.plist파일 수정 작업에 들어간다. 

<key>UIAppFonts</key>
	<array>
		<!--다운 받은 폰트 명을 전부 다 노가다로 넣어주기-->
		<string>IBMPlexSansKR-Bold.ttf</string>
		<string>IBMPlexSansKR-Medium.ttf</string>
		<string>IBMPlexSansKR-ExtraLight.ttf</string>
		<string>IBMPlexSansKR-Light.ttf</string>
		<string>IBMPlexSansKR-IBMPlexSansKR-SemiBold.ttf</string>
		<string>IBMPlexSansKR-Thin.ttf</string>
		<string>Pretendard-Black.ttf</string>
		<string>Pretendard-Bold.ttf</string>
		<string>Pretendard-ExtraBold.ttf</string>
		<string>Pretendard-ExtraLight.ttf</string>
		<string>Pretendard-Light.ttf</string>
		<string>Pretendard-Medium.ttf</string>
		<string>Pretendard-Regular.ttf</string>
		<string>Pretendard-SemiBold.ttf</string>
		<string>Pretendard-Thin.ttf</string>
		<string>AntDesign.ttf</string>
		<string>Entypo.ttf</string>
		<string>EvilIcons.ttf</string>
		<string>Feather.ttf</string>
		<string>FontAwesome.ttf</string>
		<string>FontAwesome5_Brands.ttf</string>
		<string>FontAwesome5_Regular.ttf</string>
		<string>FontAwesome5_Solid.ttf</string>
		<string>Foundation.ttf</string>
		<string>Ionicons.ttf</string>
		<string>MaterialIcons.ttf</string>
		<string>MaterialCommunityIcons.ttf</string>
		<string>SimpleLineIcons.ttf</string>
		<string>Octicons.ttf</string>
		<string>Zocial.ttf</string>
		<string>IBMPlexSansKR-Regular.ttf</string>
		<string>IBMPlexSansKR-SemiBold.ttf</string>
	</array>
  • 나는 폰트 어썸을 쓰기 때문에 다양한게 있긴 한데 처음에 폰트 파일이 폰트 어썸 코드 밑에 있었는데 오류가 계속 났어서 그냥 상위로 올렸다.

6. 모든 하던 일을 멈추고 다 끈 후에 pod install , npx react-native link 실행하기

7. 노드 모듈 제거하고 다시 yarn install 하기 

8. yarn run ios 해주고 파일에 적용하기

    fontFamily: "Pretendard-Bold",

Unrecognized font family '폰트명' 오류를 만났기 때문에 6-7-8을 해주니까 해결되었다. 

728x90