Xcodeでカスタムフォントを使用する方法

Swift, プログラム

2015.11.22

つぶやく

はてブ

あとで

こんにちは、Swift書くのが大好き@Yuuです。

iPhoneアプリを作っている時に、Xcodeで最初から指定出来るフォントではなく、Webページを作る時のようにインターネットから落としてきたオシャレなフォントを使いたい！
(ง `ω´)۶

そのように考えたこと、皆さんはありませんか？

大丈夫です、ちゃんとXcodeでもオシャレなフォント使えます。
その方法、つまりiPhoneアプリ開発においてもカスタムフォントを使用する方法があるんです！

というわけで今回はiPhoneアプリを作る際に、カスタムフォントを使用する方法をご紹介します。

今回の記事を書くにあたって以下のサイト様を参考にさせて頂きました！
ありがとうございます！

Xcode6でiOSアプリに独自フォントを組み込んで表示する | calmscape://ソフトウェア開発部

説明を行う前に

説明を行う環境

解説を行う僕のマシンの環境は以下のとおりです。

OS：OS X Yosemite10.10.5
Xcode：7.1

説明前の注意点

解説をする前に1つ注意点としまして、僕がフォントファイルを読み込ませた際に、どうやっても読み込んでくれないフォントファイルがありました。

現状そうなだけなのか、はたまたずっと使えないのか、僕の設定がおかしいのかは分からないのですが、使いたいフォントが使えない場合があるかもしれない、ということだけは覚悟しておいて下さいね。

Xcodeでカスタムフォントを使用する

カスタムフォントを使用する方法を紹介するにあたって、今回はこちらの商用利用可！英語フリーフォント200+デザイナーなら持っておきたいプロフェッショナルな欧文フォントコレクション | co-jinで紹介されている、「Geotica」というフォントを使用してご紹介させて頂きます。

Geotica - a [free] font from exljbris Font Foundry

「Geotica」というフォントを利用される方は、上記のサイトよりダウンロードしてみて下さい。

フォントを用意する

まず上記のサイトなど、自分の使用したいフォントを用意します。
具体的にサポートしているフォント形式は、以下の3つの形式になるそうです。

.otf
.ttf
.ttc

最近では「font」「woff」など様々なフォント形式があります。
使用したいフォントの形式が上記の3つの形式ではない場合は、以下のようなフォント形式を変換出来るWebサービスを使用して、「otf」形式に変換すると良いと思います。

→フォントファイルのフォーマットを変換する： ttf otf fon pfb dfont afm

Xcodeでフォントの設定をする

では、カスタムフォントの設定をしてみたいと思います。

今回は「FontSample」というSingle View Applicationのプロジェクトを適当に作ってみました。

このプロジェクトはSingle View Applicationを作成した後、真ん中にUILabelを配置し、フォントサイズを48まで大きくしただけのものになります。

このプロジェクトに、先程ダウンロードした「Geotica」というフォントのotfファイル「Geotica_2012.otf」をXcodeのプロジェクト内にドラッグアンドドロップします。

するとフォントファイルのコピーの方法をどうするか聞かれるので、

Copy items if needed
FontSample（プロジェクト）

の2つにチェックを入れてFinishを押します。

フォントを使用出来るようにする設定はこれだけで終了です！
oh...超簡単！₍₍ (ง ˙ω˙)ว ⁾⁾
素晴らしい！

というわけで読み込ませたはずの「Geotica」というフォントが使えるのかどうか試してみます。
今回はstoryboardから設定する方法と、コードベースで設定する方法、2パターンをご紹介したいと思います。

1. storyboardでカスタムフォントを使用する

先ほどのプロジェクトを例にして説明します。

まずstoryboard上からラベルを選択し、右サイドバーの
Show the Attributes inspector -> Label -> Font
の「Tマーク」のようなものをクリックします。

そしてFontを「Custom」に変更すると、Familyの中に先ほど追加したフォント「Geotica 2012」があるので選択します。

シミュレータで結果を見てみると

このように、普段とは違うオシャレなフォントGeoticaに変更されているのが分かるかと思います。

2. Swiftのコードでカスタムフォントを使用する

Swiftのコードでカスタムフォントを使用するためには、一手間加えないといけません。
そのためにまず「info.plist」というプロジェクトの設定ファイルを少しだけいじります。

info.plistのファイルを選択し「Fonts provided by application」という項目を追加します。

追加を行うと「Fonts provided by application」という文字の左隣に「▶」みたいなマークがあると思うので、これをクリックし中の項目を展開します。
そして「Item 0」というTypeがString型になっている項目があるので、こちらのValueの欄に先ほど追加したフォントファイルの名前を指定します。

今回の場合ですと「Geotica_2012.otf」と設定します。

Info.plistの設定はここまでです。

ここまで出来れば、後はいつも通りにSwiftのコードで指定するだけになります。

仮にmyLabelというUILabelのオブジェクトに対して、先ほどの「Geotica」というフォントを設定する場合は以下のように書きます。

myLabel.font = UIFont(name:"Geotica 2012", size:48)

1	myLabel.font = UIFont(name:"Geotica 2012", size:48)

1つ気をつけて頂きたい点として、ここで指定するフォント名は"storyboardのFontを設定する項目のfamilyで表示される名前"を指定するということ。

先ほどの画像を使って説明すると、
（画像を使い回して説明するので、画像に表示されている文字がおかしいのは気にしないで下さい）

この画面で選択する時に表示されている名前を指定する必要があります。

間違っても「Geotica_2012.otf」という名前のファイルを追加したから、コード内でも「Geotica_2012」と指定してやればいいんだろう、みたいな早とちりはしないように注意して下さいね。

一応myLabelにカスタムフォントを指定したViewControllerの全文も載せておきますね。
Xcode7.1なのでSwift2で書いていますが、Swift(無印)も書き方は変わらないはずです。

import UIKit

class ViewController: UIViewController {
    // カスタムフォントを指定するラベル
    @IBOutlet weak var myLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // カスタムフォントを指定
        myLabel.font = UIFont(name:"Geotica 2012", size:48)
    }
}

import UIKit

class ViewController: UIViewController {

// カスタムフォントを指定するラベル

@IBOutlet weak var myLabel: UILabel!

override func viewDidLoad() {

super.viewDidLoad()

// カスタムフォントを指定

myLabel.font = UIFont(name:"Geotica 2012", size:48)

}

あとがき

僕は初めてアプリを作った時、iPhoneアプリでは最初に用意されているフォント以外は使えないんだとばかり思ってましたw
こんな簡単に使えると分かった今ではちょっと恥ずかしいぐらいですねw

繰り返しにはなってしまいますが、注意点として使えないフォントもあるみたい・・という事は覚えておきましょう。
僕は、友達がせっかくフォントにまで拘って作った、ステキなデザインのアプリ開発に携わった時。
その際にもらった「.otf」ファイルが何故か使えず、泣く泣く他の似たフォントを指定した事があります。
もしかしたら、もらったフォントファイルのファイル名が問題だったのかも・・とは思っているのですが、未だにその謎は解けていません。

カスタムフォントを使用すると、アプリの印象がガラッと変わり良くなることも多々あるので、是非皆さんも活用してみてください。

ではでは
今回はこの辺で！ヽ(•̀ω•́ )ゝ✧