Applying Custom Fonts to Text

https://developer.apple.com/documentation/swiftui/applying-custom-fonts-to-text

"Add and use a font in your app that scales with Dynamic Type."

앱에서 동적 타입에 따라 스케일되는 폰트를 사용하거나 추가합니다.

Overview

SwiftUI는 내장된 포트를 사용해 스타일링 텍스트 뷰를 지원하며, 기본값으로 시스템 폰트를 사용합니다. 시스템이 제공하는 폰트 사용 대신 Xcode 프로젝트에 폰트 파일을 포함시켜 커스텀 폰트를 사용할 수 있습니다. 커스텀 폰트를 사용하려면, 라이센스를 갖는 폰트를 포함하는 폰트 파일을 앱에 포함시켜야 하며, 텍스트 뷰에 폰트를 적용하거나 컨테이너 뷰 내부에서 기본값 폰트로 설정해야 합니다. SwiftUI의 적응형 텍스트는 폰트를 자동으로 스케일해서 표시하며, 이는 동적 타입을 사용함으로써 작동합니다. 동적 타입은 사용자가 스크린에 나타나는 텍스트의 컨텐트 크기를 선택하는 것을 가능하게 합니다. 더 나은 가독성을 위해 더 큰 텍스트를 필요하는 사용자에게 도움이 되며, 더 작은 텍스트를 읽을 수 있는 사람들도 수용합니다.

Add the Font Files to the Project

Xcode 프로젝트에 폰트 파일을 추가하려면 아래 단계를 거쳐야 합니다.

1. Xcode에서 프로젝트 네비게이터를 선택합니다.
2. 파인더 윈도우로부터 폰트를 프로젝트로 드래그합니다. 이는 프로젝트에 폰트를 복사합니다.
3. 폰트 혹은 폰트를 갖는 폴더를 선택하고, 앱의 목표에서 확인되는 타깃 멤버십을 파일이 보여줄 수 있는지 검증합니다.

Identify the Font Files to Include in the App Bundle

iOS, watchOS, tvOS, 맥 Catalyst 타깃의 경우 앱의 Info.plist 파일에 UIAppFonts 키를 추가해야 합니다. 키 값의 경우 모든 추가된 폰트 파일에 상대적 경로를 포함하고 있는 스트링의 배열을 제공해야 합니다. macOS 앱 타깃의 경우 타깃의 Info.plist 파일에서 ATSApplicationFontsPath를 사용해야 하며, 해당 키에 대한 값으로 폰트를 쥐고 있는 폴더의 이름을 제공해야 합니다.

아래 예시에서 폰트 파일은 project-fonts 디렉토리 내부에 있기 때문에 Info.plist 파일에서 스트링 값으로 project_fonts/MyFont.ttf를 사용할 수 있습니다.

Apply a Font Supporting Dynamic Sizing

폰트의 인스턴스를 회수하고 텍스트 뷰에 font(_:) modifier와 함께 적용하려면 custom(_:size:) 메소드를 사용하시기 바랍니다. custom(_:sizs:)와 함께 폰트를 회수하는 경우 폰트의 이름을 폰트의 PostScript 이름과 일치시켜야 합니다. 폰트 북 앱을 열고 폰트 인포 탭을 선택함으로써 폰트의 포스트스크립트 이름을 찾을 수 있습니다. 만약 SwiftUI가 폰트를 회수할 수 없고 적용할 수 없다면, 대신 기본값 시스템 폰트로 텍스트 뷰를 렌더링합니다.

아래 예시는 텍스트 뷰에 MyFont를 적용하고 있습니다.

Text("Hello, world!")
    .font(Font.custom("MyFont", size: 18))

폰트는 기본값 텍스트 스타일에 따라 제공되는 크기로부터 적응해서 스케일링됩니다. relativeTo 파라미터를 사용해 기본값이 아닌 형태로 스케일링하는 것을 구체화할 수 있습니다. 예를 들어 폰트 크기를 32 포인트로 하고, 제목의 텍스트 스타일에 상대적인 스케일링을 하려면 아래처럼 수행합니다.

Text("Hello, world!")
    .font(Font.custom("MyFont", size: 32, relativeTo: .title))

SwiftUI는 굵은 글씨 혹은 이탤릭 스타일링으로 합성하지 않습니다. 만약 폰트가 얇은 혹은 이탤릭을 지원한다면, weight(_:) 혹은 italic()을 사용함으로써 텍스트 뷰의 타이포그라피를 커스터마이징 할 수 있습니다.

타깃 플랫폼에서 앱을 보강하고자 폰트를 선택하는 것에 대한 디자인 가이드는 Human Interface Guidelines에서 Typography 부분을 운영체제에 맞게 살펴보시기 바랍니다.

Human Interface Guidelines
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/

Scale Padding Using Scaled Metric

뷰 속성에 대한 ScaledMetric 속성 wrapper는 접근성 설정에 대해서 자동으로 변경시키는 스케일링된 값을 제공합니다. 적응 가능한 크기를 갖는 폰트로 작업하는 경우 시각적 디자인을 향상시키기 위해 이 속성 wrapper와 함께 텍스트 사이 혹은 주변 간격을 스케일링할 수 있습니다.

아래 예시는 @ScaledMetric을 사용해 텍스트 스타일에 상대적인 텍스트 뷰를 감싸고 있는 패딩 값을 스케일링하고 있습니다. 패딩이 추가시키고 있는 간격을 확인하기 위해 파란색 경계가 추가되어 있습니다.

struct ContentView: View {
    @ScaledMetric(relativeTo: .body) var scaledPadding: CGFloat = 10

    var body: some View {
        Text("The quick brown fox jumps over the lazy dog.")
            .font(Font.custom("MyFont", size: 18))
            .padding(scaledPadding)
            .border(Color.blue)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

아래 이미지는 어떠한 접근성 설정도 켜지지 않은 상태에서의 프리뷰를 보여주고 있습니다.

프리뷰에 대한 접근성 크기 카테고리를 ContentSizeCategory.accessibilityLarge로 설정하려면 environment(_:_:)를 사용하시기 바랍니다.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.sizeCategory, .accessibilityLarge)
    }
}

그러면 프리뷰는 커진 접근성 크기와 스케일링된 패딩을 반영하는 아래 이미지를 보여주게 됩니다.