FE/REACT_NATIVE

REACT-NATIVE - ios font적용하기 -

<zinny/> 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

'FE > REACT_NATIVE' 카테고리의 다른 글

REACT-NATIVE - 스택 내비게이션 뒤로가기 막기  (0) 2022.08.03
REACT-NATIVE-imagePicker  (0) 2022.08.02
REACT-NATIVE- textinput  (0) 2022.07.19
REACT-NATIVE- custom tab bar  (0) 2022.07.19
REACT-NATIVE - pickerSelect  (0) 2022.07.14