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 |