Unity│フォントに関するTIPSまとめ4選│uGUI

2018年8月30日2026年9月20日

uGUIのフォントに関する役立つTIPSをまとめました。

リッチテキスト、ビットマップフォント、ttcの分割、Font Awesomeの活用方法を解説します。

リッチテキストのタグについて

uGUIの標準機能です。

テキスト内にタグを記述することで、文字の色やサイズを部分的に変更できます。

上記の例では以下のタグを使用しています。

<color=#FDBA2A>5<size=72>G</size></color>

タグの種類

太文字：<b></b>
イタリック：<i></i>
サイズ変更：<size=10></size>
カラー変更：<color=#00ffffff></color>

参考：https://docs.unity3d.com/ja/530/Manual/StyledText.html

ビットマップフォントを表示する方法

uGUIの標準テキストでもアウトラインやドロップシャドウを付与できますが、複雑な装飾には限界があります。

Photoshopなどで装飾した文字画像を、フォントとして扱えるビットマップフォントを作成して利用しましょう。

手順

1. 素材の作成

Photoshopのレイヤースタイルを使って加工した文字素材を作成します。

境界線、光彩（内側）、グラデーションオーバーレイ、ドロップシャドウなどを適用します。

2. ShoeBoxのインストール

ダウンロード：http://renderhjs.net/shoebox/

3. ShoeBoxでビットマップフォント作成

ShoeBoxを起動し、GUIタブを開く
Bitmap Fontの枠へ作成した画像をドラッグ＆ドロップ
Auto fit Settingsをクリックしてスプライトを分割
Settingsを開き、Template → Modifiedを「FNT-xml Staling」に変更
File Nameを設定
Txt Charsで文字の割り当てを確認・調整
Save Fontをクリックして出力（.xmlと.png）

4. Unityで設定

ShoeBox Tools for Unity（無料）をプロジェクトにインポート
出力したxmlファイルとpngファイルをAssetsフォルダに配置
メニューの Assets → ShoeBox Tools → Import Bitmap Fonts を選択
インポート対象のXMLファイルを選択

ダウンロード：https://assetstore.unity.com/packages/tools/sprite-management/shoebox-tools-for-unity-35760

5. 表示確認

uGUIのTextを作成し、生成されたカスタムフォントと専用マテリアル・シェーダーを適用すると表示されます。

unitettcでフォント（.ttc）を分割して.ttfにする方法

Unityは.ttc形式をサポートしていないため、事前に.ttf形式へ変換する必要があります。

複数フォントがまとまった.ttcを分割すれば、必要なフォントだけを取り出して容量削減にもつながります。

フォントの拡張子について

.otf：OpenTypeフォント（PostScriptベース）
.ttf：TrueTypeフォント、単体のフォントファイル
.ttc：複数のTrueTypeフォントを1つにまとめたコレクションファイル（Unity非対応）

フォントを分割する方法

unitettcをダウンロードして展開
unitettcフォルダ内に分割したい.ttcファイルを配置
コマンドプロンプトを起動
cdコマンドでunitettcのフォルダへ移動
分割コマンドを実行

ダウンロード：https://yozvox.web.fc2.com/556E697465545443.html

cd C:\Users\ユーザー名\Desktop\unitettc
unitettc64.exe YuGothB.ttc

フォントを結合する方法（おまけ）

unitettc64.exe Test.ttc YuGothB001.ttf YuGothB002.ttf YuGothB003.ttf

Font Awesomeでアイコンを表示する方法

多数のアイコンが収録されたフォント「Font Awesome」を活用すると、個別に画像を用意しなくても手軽に仮UI素材として配置できます。

手順

Font Awesomeのフォントファイルをダウンロード
解凍したフォルダからフォントファイル（.ttf / .otf）をUnityへインポート
チートシートから表示したいアイコンの文字をコピー
uGUIのTextコンポーネントのテキスト欄にペースト

ダウンロード：https://fontawesome.com/

チートシート：https://fontawesome.com/cheatsheet

Unicodeで表示する方法

UnityのInspector上ではアイコン文字が正しく表示されない場合があるため、Unicode指定でテキストを設定するスクリプトを活用します。

using UnityEngine;
using UnityEngine.UI;

[ExecuteInEditMode]
public class TextUnicode : MonoBehaviour
{
    public string unicode;
    private Text textComponent;

    void Start()
    {
        textComponent = GetComponent<Text>();
        UpdateText();
    }

    void OnValidate()
    {
        if (textComponent == null)
            textComponent = GetComponent<Text>();
        UpdateText();
    }

    void UpdateText()
    {
        if (textComponent != null && !string.IsNullOrEmpty(unicode))
        {
            int code = int.Parse(unicode, System.Globalization.NumberStyles.HexNumber);
            textComponent.text = char.ConvertFromUtf32(code);
        }
    }
}

uGUIのTextコンポーネントを外し、代わりにこのスクリプトをアタッチします。

チートシートからfa-lock []の場合はf023と入力します。