iOS の家計簿アプリをつくる（カスタムフォント編）

はじめに
フォント追加
フォント表示
gitignore 設定
おわりに

はじめに

こちらは個人開発アプリができるまで by am10 Advent Calendar 2024の 15 日目の記事です。

15 日目はカスタムフォント対応についてです。色を設定したらフォントも設定したくなったのでカスタムフォントを使います！

フォント追加

こちらのフォントを使いました。

使いたいフォントファイルをプロジェクトに追加します。今回は Fonts ディレクトリを作成してそこに入れました（ライセンスファイルなどあれば一緒に追加しておきます）。
TARGETS > Info に「Fonts provided by application」を追加して Array の 1 つ目にフォントファイル名（拡張子まで）を追加します。

下記を試して追加したフォントがあれば成功です！

UIFont.familyNames.forEach {
    print($0)
}

UIFont.familyNames.forEach {

print($0)

}

フォント表示

Font+Custom.swift ファイルを作成して下記のように実装します。

import SwiftUI

extension Font {

    static func font851tegakizatsu(size: CGFloat) -> Font {
        // ここで指定するのはUIFont.familyNamesで表示された値
        return .custom("851tegakizatsu", size: size)
    }
}

import SwiftUI

extension Font {

static func font851tegakizatsu(size: CGFloat) -> Font {

// ここで指定するのはUIFont.familyNamesで表示された値

return .custom("851tegakizatsu", size: size)

}

下記のように呼び出してやれば追加したフォントが表示できます。

Text("hoge").font(.font851tegakizatsu(size: 20))

1	Text("hoge").font(.font851tegakizatsu(size: 20))

こんな感じです。

家計簿なので手書き風がいいかなと。全部やるとくどいかと思って金額とリストのみ手書き風にしました。

gitignore 設定

再配布が禁止されているものもある（今回使用したものは　OK ですが）ので GitHub などにアップする際は gitignore に指定してあげる方が無難かと思います。
今回は Fonts ディレクトリを作成してフォントファイルを追加したので下記のように追加すれば OK です。

Fonts

Fonts

おわりに

カスタムフォントは楽しいですが英語以外のローカライズをするときに困るかもしれないのでそのあたりの考慮も必要かと思います。

明日はアプリアイコンを作成します。

Amazon.co.jp