はじめに
XcodeでのiOS開発時、追加したカスタムフォントの使用に苦労しました。
カスタムフォントを追加して使用するために以下のことを理解しておくことが大切です。
それは、フォントファイルには複数のフォントスタイルが含まれている場合があり、ファイル名、フォントファミリー名、フォントスタイル名はそれぞれ異なる概念であるということです。
このことを念頭に、どのような手順を踏めば確実に使用できるか記したいと思います。
対象読者
- XcodeのiOS開発でカスタムフォントを使用したい方！
- UIKitのソースコード上でカスタムフォントを使用したい方！
- フォントファイルで使用できるフォントスタイル名を確認したい方！
環境
Xcode version 15.3
今回やること
- フォントファイルをダウンロード
- フォントファイルをXcode Project に追加
- Info.plist に項目を追加
- 追加したフォントファイルのフォントファミリー名・スタイル名を確認
- 追加したフォントをソースコード上で使用して実装
順に説明していきます。
(使用したいカスタムフォントがある方は、適宜置き換えて実装してください。)
前回と同様に、Interface に Storyboard を選択してプロジェクトを作成したもので解説していきます。
1. フォントファイルをダウンロード
ここでは、こちらから2つのフォントファイルをダウンロードして使用します。
今回は、Neonderthaw と NotoSansJP をダウンロードしました。
(今回は比較のため２つダウンロードしています。)
2. フォントファイルをXcode Project に追加
フォントファイルの形式は、True Type Font (.ttf) と Open Type Font (.otf) ファイルに対応しています。
ダウンロードした以下の2つのファイルをプロダクトに追加します。
- Neonderthaw-Regular.ttf
( 1つのスタイルのみの格納したファイル) - NotoSansJP-VariableFont_wght.ttf
(複数のスタイルを含むファイル)
今回は、Font フォルダにドラッグ&ドロップして追加しました。
追加する際にはAdd to targets を忘れずにチェックします。
補足
Add to targets は、プロジェクトビルド時にそのリソースをアプリケーションバンドルに含める指定する項目です。バンドルに含まれることで、そのリソースがアプリ実行時に利用可能となります。
3. Info.plist に項目を追加
Info.plistに "Fonts provided by application"というキーを追加します
項目としてフォントファイルの名前を追加します。名前の一部としてファイル拡張子を含めることに注意してください。
4. 追加したフォントファイルのファミリー名・スタイル名の確認
ソースコード上で、使用したいフォントスタイルのフォントオブジェクト(UIFont)の生成方法は以下の通りです。
UIFont(name: "フォントスタイル名", size: サイズ)
第一引数にはフォントスタイル名であることに注意して下さい。
(
決してフォントファイル名ではありません。)
追加したフォントファイルに含まれるフォントスタイル名を確認するために、以下のコードを ViewController の viewDidLoad メソッド内に追加して下さい。
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// フォントスタイル名の確認（デバッグ用）
UIFont.familyNames.forEach { familyName in
print("")
print("Family: \(familyName)")
UIFont.fontNames(forFamilyName: familyName).forEach { fontName in
print("Font: \(fontName)")
}
}
}
実行してログを確認します。
以下は追加したフォントファイルに対応するログの一部抜粋したものです。
Family: Neonderthaw
Font: Neonderthaw-Regular
Family: Noto Sans JP
Font: NotoSansJP-Thin_Regular
Font: NotoSansJP-Thin
Font: NotoSansJP-Thin_ExtraLight
Font: NotoSansJP-Thin_Light
Font: NotoSansJP-Thin_Medium
Font: NotoSansJP-Thin_SemiBold
Font: NotoSansJP-Thin_Bold
Font: NotoSansJP-Thin_ExtraBold
Font: NotoSansJP-Thin_Black
ファミリー名(Family)とは呼ばれるフォントのスタイルをひとまとまりにした総称を指しています。
Neonderthaw-Regular.ttfファイルには、ファミリー名 Neonderthaw の Neonderthaw-Regularフォントスタイルがあります。
NotoSansJP-VariableFont_wght.ttfファイルには、ファミリー名 Noto Sans JP の NotoSansJP-Thin_Regularフォントスタイルなど複数あります。
これでフォントファイルには、単一または複数のフォントスタイルが含まれていることが分かりました。
5. 追加したフォントをソースコード上で使用して実装
フォントファイルに対応したフォントスタイル名が確認できたので実際にソースコード上で使用してみます。
実装は以下の通りです。
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// フォントスタイル Neonderthaw-Regular を設定したラベル
let label = UILabel()
label.frame = CGRect(x: 50, y: 200, width: 1000, height: 150)
label.text = "Merry Christmas"
label.font = UIFont(name: "Neonderthaw-Regular", size: 100.0)
view.addSubview(label)
// フォントスタイル NotoSansJP-Thin_Regular を設定したラベル
let subLabel = UILabel()
subLabel.frame = CGRect(x: 200, y: 400, width: 500, height: 150)
subLabel.text = "メリークリスマス"
subLabel.font = UIFont(name: "NotoSansJP-Thin_Regular", size: 50.0)
view.addSubview(subLabel)
}
}
以下が実行結果です。
正しく表示されることが確認できました。
UIFont インスタンス生成時に気をつけること
存在しないフォントスタイル名で、実装した場合も確認します。
以下のように一部の実装を変更します。
subLabel.font = UIFont(name: "NotoSansJP-VariableFont_wght", size: 50.0)
以下が実行結果です。
"メリークリスマス"の表記が正しく表示されないことを確認できました。
これは指定したフォントスタイルが存在しない場合起きてしまいます。
UIFont(name:size:)がnilを返し、デフォルトのシステムフォントが使用されてしまったのです。
なのでカスタムフォントの利用でうまくいかない場合は、以下の項目を改めて確認しましょう。
- 指定したフォントスタイル名が存在するか
- フォントファイルがビルド対象に含まれているか
（Add to targetsのチェック漏れ）- Info.plistに正しくフォントファイル名が登録されているか
(拡張子の記入漏れ)
まとめ
カスタムフォントを使用するまでの簡潔なフローは以下の通りです。
カスタムフォントファイルをXcodeプロダクトに追加。
(追加する際はAdd to targets にチェック。)
↓
Info.plist の Fonts provided by application にファイル名を追加。
(追加する際は拡張子も含める。)
↓
追加したファイルのフォントスタイル名(フォント名)を確認。
正しくカスタムフォントを実装するために、フォントファイルに含まれるフォントスタイルを確認してから使用することを忘れずに行いましょう！