leebaek

[SwiftUI] Font추가 | Custom Font 사용법 본문

개발/Swift

[SwiftUI] Font추가 | Custom Font 사용법

leebaek 2024. 1. 8. 22:11

 

■ SwiftUI Cutsom Font 추가하는법 | 사용하는법

텍스트에 기본 폰트가 아닌 사용자가 다운로드한 폰트를 적용시키기 위해선 프로젝트에 폰트를 추가해주어야 한다.

 

위가 커스텀 폰트, 아래가 일반 폰트


 

□ SwiftUI 폰트 추가방법

□ SwiftUI Custom Font 사용 방법 1 ) 기본

□ SwiftUI Custom Font 사용 방법 2 ) 메서드 사용


□ SwiftUI 폰트 추가방법

> 먼저, 추가하길 원하는 폰트를 다운로드한다.

본 포스팅에선 Pretendard 폰트를 사용하였다.

 

https://cactus.tistory.com/306

 

Pretendard

Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는

cactus.tistory.com

m1에 폰트를 설치하려면 아래의 블로그를 보고 따라하면 된다.

https://parkpictures.tistory.com/828


 

>  xcode에서 프로젝트 파일을 열어준 후, 폰트를 담을 그룹을 생성해준다.

- 편의를 위해 Resource 그룹과 Fonts 그룹을 생성해주었다.


> Fonts 안에 다운로드 받은 Font를 드래그해서 넣어주면 된다.

 

이때 *주의*해야할 부분은 파일 드롭 후 뜨는 옵션 창에서 'Add to targets' 부분이다.

적용시킬 target에 체크표시를 해야 폰트 적용이 가능하다고 하니 참고하길 바란다.

두번째 사진처럼 체크 표시


□ SwiftUI Custom Font 사용 방법 1 ) 기본

> 추가된 font는 아래의 코드로 텍스트에 적용 가능하다.

Text("폰트 적용")
	.font(.custom(name: String, size: CGFloat))

Text("폰트 적용")
	.font(.custom("Pretendard-Black", size: 10))

 


□ SwiftUI Custom Font 사용 방법 2 ) 함수 사용

-1번 방법을 사용해도 되지만 오타가 날 위험이 있고, 폰트 이름이 길다면 가독성이 떨어지는 단점이 있다.

그렇기 때문에, 함수를 이용해서 폰트를 적용한다면, 위의 단점을 보완해줄 수 있다.

 

*extension에 메서드를 추가하는 방법*


> 프로젝트에 새로운 파일을 만들어준다. 

- FontManager 파일을 생성해주었다.


> extension에 메서드를 추가하는 방법을 사용할 것이다.

-enum(열거형)을 사용하여, 저장된 폰트의 특징을 case에 나열한다.

-return 값에 폰트의 이름을 넣어주면 된다.

-아래와 같은 메서드를 추가해주면 된다.

static func Pretendard(_ type: pretendard, size: CGFloat = 17) -> Font {
        return .custom(type.value, size: size)
 }

> 전체 코드

import SwiftUI
extension Font {
    enum pretendard {
        case semibold
        case medium
        case black
        case regular
        case bold
        
        var value: String {
            switch self {
            case .semibold:
                return "Pretendard-SemiBold"
            case .medium:
                return "Pretendard-Medium"
            case .black:
                return "Pretendard-Black"
            case .regular:
                return "Pretendard-Regular"
            case .bold:
                return "Pretendard-Blod"
            }
        }
    }

    static func Pretendard(_ type: pretendard, size: CGFloat = 17) -> Font {
        return .custom(type.value, size: size)
    }
}

> 사용 방법 

> 추가된 font는 아래의 코드로 텍스트에 적용 가능하다.

Text("폰트 적용")
	.font(.Pretendard(String, size: CGFloat))

Text("폰트 적용")
	.font(.Pretendard(.medium, size: 16))
    
Text("폰트 적용")
	.font(.Pretendard(.Bold))

참고 사이트

https://stackoverflow.com/questions/67700147/adding-custom-fonts-as-an-extension-to-the-font-type-swiftui

https://medium.com/@sauvik_dolui/handling-fonts-in-ios-development-a-simpler-way-32d360cdc1b6