[iOS] 커스텀 폰트를 적용해보자

안녕하세요 🐶

이번시간에는 프로젝트에 커스텀 폰트를 적용시켜보겠습니다

사실 이건 공식문서에 방법이 너무 잘나와있어요...

---

 

그런데 제 사례도 보여줄겸 +  복습해서 잘 기억해먹으려고 쓰는 글입니당

제가 진행중인 프로젝트는 Roboto 라는 폰트를 사용하고 있었는데

실제 적용시켜보니 피그마와 다르게 표시된 것이 문제였어요

 

지적된 문제점은:

1. 숫자 0에 빗금이 가있어서 별로다 (기계적으로 보인다?)

2. 공백의 너비가 너무 크다

 

그래서 아직 추가될 요소가 많긴 하지만 디자인적 완성도가 떨어져보였습니다.

 

기존의 폰트

 

Attritbuted String 을 사용할 수 도 있었지만 모든 텍스트요소에 이것을 적용하는데 드는 비용보다

폰트를 그냥 변경하는게 빠르겠다고 생각했고,

 

그래서 Spoqa Han Sans Neo 로 변경하기로 결정했답니다.

토스, 타다와 같은 기업에서도 사용중인 폰트더라구요??

디자인 비전공자인 제가봐도 정~~~~~말 깔끔하고 보기 좋았어요👍🏻

 

그리고 위에서의 두 문제도 해결되었네요!

한산스네오 적용 후

 

---

 

그럼 커스텀 폰트를 적용해보러 가보아요~~~~~~~~ 🏃🏻‍♀️🏃🏻

 

 

확장자 타입은 otf, ttf 중에 아무거나 받아도 Mac 에서는 잘 동작하지만

otf 는 그래픽 작업과 고해상도 출력에 필요한 타입 으로 알고 있고 용량도 더 컸기 때문에

ttf 로 받았습니다.

용량 10배차이 뭐임.........

 

또한 기존 앱의 크기가 40MB인 상황에서

39 MB 크기의 폰트를 추가하여 앱 용량을 두 배로 늘리는 것은 적절하지 않다고 판단하였기 때문에 

서브셋으로 받았습니다.

 

서브셋에서는 지원하지 않는 글자조합이 있을 수 있기 때문에 사용자 입력창에서 사용하기에는 적절하지 않습니다.

따라서 textField 영역과 같은 사용자 입력 부분과

영문 파트는 기본 System Font 를 사용하기로 결정했어요!

---

 

커스텀 폰트를 추가하는 방법

 

1. 프로젝트에 리소스 넣기

 

프로젝트 네비게이터

 

우선 다운받은 폰트를 드래그앤 드롭으로 프로젝트 네비게이터에 끌어 넣어주세요.

리소스 정리를 위해 Fonts 라는 폴더를 따로 만들어 놓아도 좋겠네요~!

그럼 다음과 같은 창이 뜨는데,

하나씩 무엇을 선택해야하는지 살펴볼게요

그리고 자세하게 알고 싶다면 Xcode 공식 가이드 문서를 보면 되요!

 

 

Copy items if needed

꼭 체크해주세요!

체크하지 않는다면 실제 파일이 복사되어 추가되지 않고

레퍼런스로 다른 경로에 위치한 파일을 가리키게됩니다.

따라서 git 수정사항에도 반영되지 않기 때문에 이대로 머지하면 이후 이 커밋을 사용하는

팀원들이 빨간색 글씨를 보게 될거에요.

프로젝트파일에서는 있다고 말하는데 실제 파일은 없음;;;

이거 협업 처음했을때 생각보다 정말 많이 고생했던 이슈였습니당 ㅠㅠㅠㅠ

 

 

Create groups

이건 항상 이옵션을 선택하기는 했는데,

Create folder references 를 하면 실제 폴더를 만들지 않고 논리적 개념의 폴더로 관리되는 것으로 알고 있어요

Create Groups 로 가주세요~!!!

 

 

Add to targets

이건 선택하지 않으면 앱을 빌드??배포?? 할 때 추가한 폰트가 포함되지 않습니다.

 

---

 

2. 제대로 들어갔나 확인하기

 

 

프로젝트 파일 -> 타겟 선택 -> Build Phase -> Copy Bundle Resources

만약 제대로 들어가 있지 않다면 아래쪽의 + 버튼으로 추가해주시면 됩니다~!

---

 

3. iOS 에 폰트파일 등록하기

 

프로젝트를 파일에 추가했으면, 이제 iOS 에게 폰트에 대한 정보를 알려주어야합니다.그러기 위해서는 info.plist 파일에 관련키와 값을 넣어주어야하는데요.

 

"Fonts provided by application" 키를 추가하고 배열에 Item0 , Item1  순서로 차례대로 추가하여 값에 폰트파일 이름을 확장자까지 포함하여 넣어주시면 됩니다.

 

---

 

4.  사용하기

이후 스토리보드 어트리뷰트 인스펙터에 잘 추가된 것을 확인할수 있습니다.

그런데 코드로 사용하고 싶을 때도 있죠.

그것은 4번에서 살펴볼게요!

 

 

4. UIFont 에 등록된 실제 폰트 이름 찾기

왜 파일명을 안쓰고 이름을 따로 찾아주어야하냐면,

실제 파일 이름과 UIFont 가 내부적으로 사용하는 폰트 이름이 같지 않기 때문입니다.

그건 다음과 같은 코드로 콘솔창에서 확인할 수있어요!

 

프로젝트의 적절한 파일에 적절히 코드를 넣고 실행해보면 뭐가 엄청 많이 뜨는데,

cmd + f 로 제가 추가한 폰트를 찾아볼 수 있어요.

어떤 이름으로 사용되는지 파악완료~!!!

 

 

바로 코드로 적용해볼게요

 

---

오늘도 나는 성장했다!!🔥

 

🤖🟢[우짱의 iOS 블로그]🔵💻

iOS를 공부하면서 배운 내용을 기록하고 있습니다.

 

[참고 링크]

https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

https://help.apple.com/xcode/mac/current/

[ SeSSAC iOS 데뷔과정 ]