[iOS] 폰트 적용하는 법

안녕하세요 Jerry입니다.

 

오늘은 iOS 앱을 개발할 때 폰트 적용하는 법에 대해 알아보겠습니다.

 

iOS를 공부하면서 정리하는 것이기 때문에 미흡한 점이 있을 수 있습니다. 부족한 점에 대해 댓글 남겨주시면 감사하겠습니다.

 

 

우선 폰트를 추가하기 위해서 원하는 폰트를 다운로드하여야 합니다.

 

애플에서 만든 SF(San Francisco) 폰트와 우아한형제들에서 만든 "주아체"폰트를 적용해 보겠습니다.

 

아래 링크를 들어가시면 5가지 폰트가 있는 것을 확인할 수 있습니다.

Fonts - Apple Developer

각 폰트의 특징은 아래와 같습니다.

폰트 이름	사용가능 OS(또는 언어)
SF Pro	iOS, iPad OS, macOS and tvOS
SF Compact	watchOS
SF Mono	Xcode
SF Arabic	아랍어
New York	라틴어, 그리스어, 키릴 문자

 

본 글은 iOS 개발을 할 것이기 때문에 SF Pro를 다운로드하겠습니다.

 

다운로드를 완료한 후 맥북에 기본적으로 내장되어있는 "서체 관리자"를 실행하고 SF Pro를 찾으면 아래와 같이 SF Pro 폰트를 확인할 수 있습니다.

그리고, 우아한형제들에서 만든 "주아체" 폰트를 다운로드하여 보겠습니다.

아래 링크로 접속합니다.

배달의민족 폰트 주아체 다운로드

현재 개발환경은 맥이기 때문에 OTF 맥용 다운로드 버튼을 클릭합니다.

다운로드한 파일을 실행하시면 아래와 같은 화면이 나오게 됩니다. "서체 설치" 버튼을 클릭하면 서체 관리자에 추가된 것을 확인할 수 있습니다.

이제 프로젝트에 폰트를 적용해 보겠습니다.

프로젝트를 생성하고, UILabel 2개를 추가합니다.

그리고 다운로드한 폰트 정보를 담을 수 있도록 Font 폴더를 생성합니다.

그리고 다시 서체 관리자로 돌아가서 SF Pro 폰트로 이동하고 원하는 폰트를 우클릭하여 "Finder에서 보기"를 클릭합니다.

본 글은 SF Pro의 일반체를 사용합니다.

검색한 폰트의 위치를 확인할 수 있습니다. SF-Pro.ttf 폰트를 Xcode의 Font폴더로 이동합니다.

그렇게 되면, Xcode에서는 아래처럼 옵션을 선택하라는 화면이 등장하게 됩니다. 아래 그림처럼 선택하고 Finish 버튼을 클릭하면 Font폴더에 SF-Pro.ttf폰트가 추가된 것을 확인할 수 있습니다.

배달의민족 주아체도 프로젝트에 추가합니다.

위에서 SF-Pro.ttf 폰트를 추가한 방법과 동일하게 추가하시거나 아래 방법을 따라 해 주시면 됩니다.

배달의민족 주아 OTF 폰트를 우클릭하여 "Finder에서 보기"를 클릭합니다.

검색한 폰트의 위치를 확인할 수 있습니다. BMJUA_otf.otf 폰트를 Xcode의 Font폴더로 이동합니다.

Xcode에서는 아래처럼 옵션을 선택하라는 화면이 등장하게 되면, 아래 그림처럼 선택하고 Finish 버튼을 클릭하면 Font폴더에 BMJUA_otf.otf폰트가 추가된 것을 확인할 수 있습니다.

폰트를 적용하기 전, 먼저 info.plist에 추가한 폰트를 명시해줘야 합니다.

"Fonts provided by application"을 추가하고, 추가한 item의 확장자 파일명까지 정확하게 입력합니다.

폰트를 적용하기 위해 Xcode에서 폰트가 어떤 이름으로 되어있는지 확인해야 합니다.

아래 코드를 viewDidLoad에 넣어 실행하면 UIFont의 전체 폰트의 이름을 확인할 수 있습니다.

for family in UIFont.familyNames {
  print(family)

  for sub in UIFont.fontNames(forFamilyName: family) {
    print("====> \(sub)")
  }
}

여기에서 아까 추가했던 SF-Pro.ttf와 BMJUA_otf.otf를 찾습니다.

찾은 이름은 SFPro-Regular와 BMJUAOTF입니다.

 

 

이제 폰트를 적용해 보겠습니다.

각 라벨을 @IBOutlet에 연결하고, 각 라벨에 text를 설정합니다.

그리고 아래 코드를 사용해 label의 font 속성에 아래 폰트를 적용합니다.

/*바꾸고자 하는 라벨*/.font = UIFont(name: "/*바꾸고자 하는 폰트이름*/", size: 20)

시뮬레이터를 실행하면, 올바르게 폰트가 적용된 것을 확인할 수 있습니다.

참고할 사항

폰트의 경우 특정 글 (예. 뷁) 같은 단어들은 적용이 되지 않을 수 있으므로 이 부분을 개발하기 전 먼저 꼭 확인해야 합니다.

 

SF 폰트의 경우 애플 관련 플랫폼 개발에만 사용할 수 있다고 합니다.