読者です 読者をやめる 読者になる 読者になる

酢ろぐ!

カレーが嫌いなスマートフォンアプリプログラマのブログ。

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

iPhone Swift

その昔、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"
    }

まとめ

ヘッダー部分はInterface Builderを使ってフォントを指定しており、ボディー部分はプログラム上でUIFontを取得してUILabelへ表示させる方法を使用しました。

f:id:ch3cooh393:20151129202609p:plain

本記事には「プロジェクト・ペイントボール スプラトゥーン風アルファベットフォント」を利用しました。最初は窓の杜で紹介されていた「イカモドキ」を使おうと思っていたのですが、現在既に配布が終了していることを知りました。

関連記事

*1:Xcode 6からできるようになっていたようです。知りませんでした…