Cute Bow Tie Hearts Blinking Pink Pointer

프론트엔드/React-Native(RN)

react-native 글꼴 ios에서만 적용 안 되는 문제 해결

청포도 에이드 2025. 2. 23. 02:02
728x90

 

RN 프로젝트에 Fonts 폴더를 넣고, 원하는 폰트 파일을 넣고

npx react-native-asset 를 했으나,

ios환경에서만 글꼴이 적용되지 않는 문제에 봉착했다.

 

1. info.plist 확인

2. react-native.config.js 파일 확인

3.link-assets-manifest.json 확인

4. xcode Resources 폴더 안에 글꼴 파일 있는지 확인

5. 캐시 삭제 후 재빌드

6. 글꼴 파일 명 오타 없는 지 확인

 

전부 해봤음에도 해결되지 않았다.

문제는 android 환경에서는 멀쩡히 된다는 것...

 

위의 모든 경우의 수를 다 따져봤는데도 IOS만 폰트가 적용되지 않을 경우

 

Mac 환경에서 폰트의 PostScript 를 확인해봐야한다.

 

Android 같은 경우, 단순 폰트 파일명과 이 PostScript가 달라도 글꼴이 적용이 되지만,

IOS는 폰트 파일명과 PostScript명이 같아야된다고 한다....

 

제작자가 처음부터 지정해놓은 PostScript명과 똑같이 파일명을 바꾸고

다시 npx react-native-asset 명령을 실행해주면 된다.

(파일명 바뀐 게 적용 안 되면 수동으로 해야함)

 

PostScript 확인하는 법

 

1. 런치패드에서 '서체'검색

 

 

서체 관리자에 들어가준다.

 

2. 다운 받은 글꼴 클릭 후, command + i (이 때 서체 관리자에 프로젝트에서 사용하는 글꼴이 없으면 별도로 서체관리자에서도 다운로드 해주어야함. VScode기준 글꼴 파일에서 마우스 오른쪽 클릭 후 finder로 열기를 통해 다운로드 가능)

 

이 상태에서 command + i 동시에 누르면,

아래와 같은 화면이 뜨는데,

여기서 빨간색으로 밑줄 친 곳의 이름과 글꼴 파일명을 똑같이 지정해주어야

IOS환경에서 글꼴 적용이 된다.

 

 

 

 

대체 왜 PostScript 이름과 글꼴 파일명을 다르게 하여 배포하시는 건지 모르겠지만....

무료로 상업용 글꼴을 배포해주시는 것에 감사하기로 했다.

 

 

 

728x90