[UIKit] Font 설정하기

 

 

폰트를 앱에 적용하는 과정은 따라하면 어렵지 않지만, 은근히 헷갈리는 부분이 많다.

과거 프로젝트를 UI부터 리팩토링하는 김에, Xcode에 커스텀 폰트를 적용하는 방법을 정리하기로 했다.

 

 

 

 

 

 

1.  무료 폰트 사이트 이용하기

먼저 앱에 적용할 폰트를 무료 폰트 사이트에서 다운로드한다. 이 포스팅에서는 GmarketSans를 예시로 사용한다.

• 추천 무료 폰트 사이트:
  • 눈누: https://noonnu.cc/
  • 구글 폰트:  https://fonts.google.com/

보통 한글 폰트는 '눈누'에서, 영어 폰트는 '구글 폰트'에서 많이 찾지만, 눈누 폰트도 영어 폰트 대응이 꽤 괜찮아 한국어-영어 폰트를 모두 사용해야 한다면 눈누만으로도 충분하다. TTF 형식의 폰트 파일을 다운로드한다.

 

 
 

 

2. 프로젝트에 폰트 파일 추가

다운로드한 폰트 파일을 Xcode 프로젝트에 추가해야 한다. 이때 Add to targets에서 폰트를 사용할 프로젝트가 체크되어 있는지 반드시 확인한다. 이 과정을 거쳐야 프로젝트가 해당 폰트 파일을 인식할 수 있다.

 

 
 
 

3. Info.plist 설정

프로젝트의 Info.plist 파일에 폰트 정보를 등록해야 한다.

1. Information Property List 항목에 Fonts provided by application 키를 추가한다.
2. 다운로드한 글꼴 파일의 개수만큼 Item을 추가한다.
3. 각 Item의 Value에는 글꼴 파일명과 확장자(예: GmarketSansTTFLight.ttf)를 정확히 입력한다.

 

 

 

4. 정확한 폰트 이름 확인

Info.plist에 등록한 파일명과 실제 코드에서 사용해야 할 폰트 이름(PostScript 이름)이 다를 수 있다. 이 때문에 폰트 이름을 확인하는 과정이 필수적이다.

 

다음 코드를 프로젝트의 아무 곳(예: viewDidLoad())에 임시로 작성하고 실행한다.

 

func checkFontName() {
        UIFont.familyNames.sorted().forEach { familyName in
            print("*** \(familyName) ***")
            UIFont.fontNames(forFamilyName: familyName).forEach { fontName in
                print("\(fontName)")
            }
            print("---------------------")
        }

 
 

앱을 실행하면 디버그 영역에서 다운로드한 폰트의 정확한 이름을 확인할 수 있다. 이제 이 이름을 사용하여 폰트를 적용한다.

 
 
 

5. 폰트 적용 방법

확인된 폰트 이름을 사용하여 UI 요소에 폰트를 적용한다.

 

5-1. Struct로 폰트 관리 (추천)

앱 내에서 여러 폰트 스타일(굵기, 크기)을 사용할 경우 Struct를 만들어 관리하면 편리하다.

//  Font.swift
//  BOOKWARM Project
//
//  Created by Callie on 2023.
//

import UIKit

struct Font {
    
    /*
     ==== Gmarket Sans TTF
     GmarketSansTTFLight
     GmarketSansTTFMedium
     GmarketSansTTFBold
     */
    
    static let light12 = UIFont(name: "GmarketSansTTFLight", size: 12)
    static let medium15 = UIFont(name: "GmarketSansTTFMedium", size: 15)
    static let bold18 = UIFont(name: "GmarketSansTTFBold", size: 17)
    
}

 

여러 폰트를 사용할 때는 GmarketSansLight, NotoSansBold와 같이 좀 더 명확하게 이름을 지어주는 것이 좋다. 이 프로젝트에서는 하나의 폰트만 사용하므로 굵기와 폰트 사이즈 조합으로 간단하게 이름을 정한다.
 

5-2. font에 적용시켜주기

Struct로 관리하는 폰트는 다음과 같이 불러와서 적용한다.

titleLabel.font = Font.medium15

 
 

6. 결과 확인

모든 단계를 완료하면 앱에 커스텀 폰트가 성공적으로 적용된 것을 확인할 수 있다.

 

폰트 적용 전 / 후

 
 
 
 
 

---