[SwiftUI] - Custom Font 적용

 

프로젝트를 진행할 때 Font를 외부에서 가져와 사용해야 할 때가 많다.

나도 이번 프로젝트를 진행하면서 외부 Font를 다운받아 Xcode에 적용하여 사용했다 ㅎㅎㅎ

 

1️⃣ Font 다운받기

 

"Pretendard" Font를 아래의 사이트에서 다운받았다.

 

눈누

 

 

2️⃣ 다운로드한 Font Xcode에 넣기 

 

사이트에서 다운받은 파일을 압축 해제하면 다음과 같은 otf 파일을 확인할 수 있다.

 

 

 

otf 파일들을 모두 Xcode안에 넣어준다. 

나는 [Resource - Fonts] 폴더 안에 넣어주었다.

 

📍 주의할 점! 

 

"Add to targets" 를 꼭 체크해줘야 한다.

target 설정을 하지 않으면 추가한 Font를 Xcode에서 인식하지 못하기 때문이라고 한다,,,

 

 

 

넣어주면 다음과 같이 폴더 안에 otf 파일이 잘 들어간 걸 확인할 수 있다.

 

 

 

3️⃣ info.plist에 Font 추가

 

SwiftUI는 UIKit와 달리 info.plist가 프로젝트 생성 시 보이지 않는 거!!!

=> 프로젝트를 만들면 info.plist 파일이 생성되는 건 맞지만, 노출되지 않고 파일 내용이 변경된 후에 노출된다고 한다.

 

그럼 info.plist 어떻게 수정하냐?!!?

[TARGETS - info]에서 수정하면 된다 ㅎㅎ

 

 

여기서 + 버튼을 누르고 key에 "Fonts provided by application"를 입력해 준다. 

그리고 value에는 Font 파일 목록들을 확장자 포함해서 작성하면 적용된다.

 

 

 

4️⃣ Extension으로 관리

 

다음과 같이 열거형으로 만들어주고 pretendard 함수를 사용해 간편하게 사용할 수 있도록 했다.

 

extension Font {
    enum PretendardWeight {
        case black
        case bold
        case heavy
        case ultraLight
        case light
        case medium
        case regular
        case semibold
        case thin
        
        var value: String {
            switch self {
            case .black:
                return "Black"
            case .bold:
                return "Bold"
            case .heavy:
                return "ExtraBold"
            case .ultraLight:
                return "ExtraLight"
            case .light:
                return "Light"
            case .medium:
                return "Medium"
            case .regular:
                return "Regular"
            case .semibold:
                return "SemiBold"
            case .thin:
                return "Thin"
            }
        }
    }

    static func pretendard(_ weight: PretendardWeight, size fontSize: CGFloat) -> Font {
        let familyName = "Pretendard"
        let weightString = weight.value

        return Font.custom("\(familyName)-\(weightString)", size: fontSize)
    }
}

 

 

5️⃣ 사용방법

 

기존에 사용하던 system Font 사용과 비슷하도록 구현하였다.

 

• system Font

.font(.system(size: 24, weight: .semibold))

 

• custom Font

.font(.pretendard(.semibold, size: 24))

 

 

이렇게 함으로써 간편하게 Custom Font를 가져와 사용할 수 있다~~~~~