iOSでカスタムフォントを使う

その昔、iOSアプリでカスタムフォントを使うのはそれなりに大変だった気がするのですが、Xcode 7ではInterface Builderからカスタムフォントを直接指定できるようになっていました*1。

本記事では、iOSでカスタムフォントを使う方法を紹介します。具体的にはUILabelでフォントを指定する方法です。

iOSでカスタムフォントを使う

アプリにフォントを組み込む

適当にプロジェクトを作ります。ここでは「FontSample」という名前のプロジェクトを作成しました。特に重要になる要素はありませんが、言語にはSwiftを指定していてます。

f:id:ch3cooh393:20151129203405p:plain

使用したいカスタムフォントをプロジェクトへコピーします。好みですが僕はresources配下にリソースを置くので、resources/fontsフォルダを作成して、そこにフォント(.otfファイル)をドラッグアンドドロップします。

f:id:ch3cooh393:20151129203416p:plain

「Copy items if needed」にチェックをつけます。Add to targetsにもチェックをつけるのを忘れないようにしましょう。

f:id:ch3cooh393:20151129203542p:plain

この後、UILabelを配置しながらフォントを指定していきます。「Interface Builderでフォントを指定する方法」と「プログラムでフォントを指定する方法」を紹介していきます。

Interface Builderでフォントを指定する

普通にフォントを指定します。

f:id:ch3cooh393:20151129203633p:plain

f:id:ch3cooh393:20151129204811p:plain

フォント一覧が表示されるのですが、ここにカスタムフォントが追加されています。カスタムフォントを追加後にビルドしておかないと追加されないかもしれません。

f:id:ch3cooh393:20151129204820p:plain

指定したフォントがInterface Builder上で反映されているのが確認できます。

プログラムでフォントを指定する

コードは以下のような感じです(と言ってもIBOutletを追加しているだけです)。

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var labelStage1: UILabel!
    @IBOutlet weak var labelStage2: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Interface BuilderでUILabelを追加して、UILabelとソースコードとをドラッグアンドドッロップでバインドしておきます。

f:id:ch3cooh393:20151129210002p:plain

適当なタイミングで、UIFontを生成してUILabelへフォントを指定しました。

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        labelStage1.font = UIFont(name: "Project Paintball", size: 30)
        labelStage1.text = "Museum d'Alfonsino"
        
        labelStage2.font = UIFont(name: "Project Paintball", size: 30)
        labelStage2.text = "Walleye Warehouse"
    }