[SwiftUI] カスタムフォントの使い方 (iOS/macOS 個別対応)

SwiftUI2021

     
⌛️ 3 min.
SwiftUI で Custom フォントを使う方法を説明します。(iOS/macOS 対応)

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Sonoma Beta 4
  • Xcode 15 Beta 5
  • iOS 17 Beta 4
  • Swift 5.9

# 特に Beta の機能は使用していません

Font

アプリによっては、独自のフォントを使用したいケースがあります。

以下では、独自のフォントをアプリで使用する方法を説明します。

フォントとしては、TTF, OTF 等のフォーマットがあります。
以降では、TTF フォントを使って説明しますが、OTF 等 サポートしているフォントであれば、方法は同じです。

注意

フォントによっては、アプリに組み込んで配布することを禁止しているものもあります。組み込み前に、ライセンスを確認してください。

以下では、こちらで配布されている DSEG フォントを使用した例になります。
# 配布されているフォントの中でも、DSEG14Modern-Regular.ttf ファイルを使っていきます。

以下の様なフォントです。

FontExample

アプリへのフォント組み込み

ちなみに、Apple のドキュメントは、こちらです。

プロジェクトへのコピー

まず、必要な フォントファイルをプロジェクトにコピーします。
この例では、”DSEG14Modern-Regular.ttf” というファイルです。

プロジェクトに Drag&Drop しても良いですし、”Add Files to …” で追加しても問題ありません。

プロジェクトの Build Phases を確認すると、プロジェクトに追加されたフォントファイルは、デフォルトで、Resources にコピーされる設定になる様です。

フォント向けにフォルダを作りたい 時は、 Build Phases を修正します。

Info.plist の変更

アプリのリソースに入れたフォントを使用するためには 宣言する必要があります。

宣言は、Info.plist で行いますが、iOS と macOS で違いがあります。

iOS

iOS では、フォント毎に設定が必要です。

“Fonts provided by application” というキーで 作成すると Array タイプが作成されますので、その子要素に “フォントファイル名” を設定します。

forIOS

macOS

macOS では、”Application fonts resource path” を設定することが必要となります。

その名前からわかる様に フォントへのパスです。
Resources からの相対パス設定が必要です。

formacOS

デフォルトで Resources の直下にコピーされていますので、そのままの位置で使用したいのであれば、”.” (ドット)を設定することで、参照することが可能となります。

注意:iOS/macOS での相違

上記の様に、iOS と macOS では、Info.plist に設定するキー だけでなく、その値も異なります。

フォント名の確認(アプリから見えているかの確認)

すぐに使用開始するのも良いのですが、アプリからきちんと参照できているかの確認を行いましょう。

以下のコードを使って、アプリから利用できるフォントを確認します。

いずれかの View の onAppear 等に記述してみて、フォントが読み込めていることを確認してください。

自分がコピーした(と思っている) フォント名が表示されることを確認してください。
また、あとで必要になりますので、フォント名を記録しておいてください。

func listFonts() {
    #if os(macOS)
    for family in NSFontManager.shared.availableFontFamilies.sorted() {
        guard family.hasPrefix("DSEG") else { continue }
        if let familyFonts = NSFontManager.shared.availableMembers(ofFontFamily: family) {
            for familyFont in familyFonts {
                if let name = familyFont[0] as? String {
                    OSLog.appLogger.debug("\(name, privacy: .public)")
                }
            }
        }
    }
    #else
    for family in UIFont.familyNames {
        guard family.hasPrefix("DSEG") else { continue }
        for name in UIFont.fontNames(forFamilyName: family) {
            OSLog.appLogger.debug("\(name, privacy: .public)")
        }

    }
    #endif
}

上記は、DSEG フォントを使用したい時に使ったコードです。DSEGで始まる名前を持つ フォントファミリーだけを表示対象にしています。(適宜、修正してください。)

注意

フォントの名称は、フォントのファイル名と異なることがあります。この段階でフォント名をきちんと確認しておくことは大切です。
ファイル名を指定する箇所と フォント名を指定する箇所をきちんと区別しないと動作しません。

以下の様に アプリから参照したい(この例では DSEG14Modern-Regular) フォントが 表示されることが確認できれば、OK です。

DSEG14Modern-Regular

Text のフォント指定

SwiftUI で カスタムフォントを使う時には、.font modifier を使用して カスタムフォントを指定します。

Apple のドキュメントは、こちら

今回は、DSEG14Modern-Regular というフォントを使用しようとしているので、以下の様に font を指定しています。

Text("0123456789")
    .font(.custom("DSEG14Modern-Regular", size: 28))

上記の様に設定することで、iOS/macOS それぞれで以下の様に表示されます。

iOSScreen
macOSScreen

Font Book / macOS へのインストール

macOS では、Font Book という便利なアプリが用意されています。

FontBook

ttf ファイル等のフォントファイルをダブルクリックすることで、Font Book が起動され、使用している macOS にインストールすることができます。

フォントをインストールすると、Font Book でフォントを確認することができる様になりますので、便利です。

Font Book を使うと便利なのですが、そのフォントを macOS アプリで使用している時には、フォントがアプリの内部リソースから提供されているのか 実行環境の macOS が提供しているか の確認が難しくなります。

Font Book に表示されているフォント上で、右クリック → ”無効化” を選択すると、アプリから使用することができなくなり、アプリ内でフォントがきちんと設定されているかを確認することができます。

DisableFont

まとめ

SwiftUI での カスタムフォントの使い方を説明しました。

SwiftUI での カスタムフォントの使い方
  • フォントは、ttf/ otf フォントに対応している
  • アプリの Resources 配下にコピーすることが必要
  • iOS/macOS でフォント使用設定が異なる
  • iOS では、使用するフォントファイルを指定する
  • macOS では、使用するフォントファイルへのパスを指定する
  • Font Book は便利だけれど、リソース内のフォントがきちんと使用されているかを確認するには工夫が必要

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

SwiftUI おすすめ本

SwiftUI を理解するには、以下の本がおすすめです。

SwiftUI ViewMatery

SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
英語での説明になってしまいますが、以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、便利です。

英語ではありますが、1ページに コードと画面が並んでいるので、非常にわかりやすいです。

View に適用できる modifier もわかりやすく説明されているので、ビューの理解だけではなく、どのような装飾ができるかも簡単にわかります。

超便利です

SwiftUIViewsMastery

販売元のページは、こちらです。

SwiftUI 徹底入門

# SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも 定番本です。

Swift学習におすすめの本

詳解Swift

Swift の学習には、詳解 Swift という書籍が、おすすめです。

著者は、Swift の初期から書籍を出していますし、Swift の前に主力言語だった Objective-C という言語についても同様の書籍を出しています。

最新版を購入するのがおすすめです。

現時点では、上記の Swift 5 に対応した第5版が最新版です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です