【Godot】Godotの日本語フォント入門:PCごとに変わる書体を1本に決め、色と揺れを混ぜた文を出す

作成: 2026-09-22最終更新: 2026-10-10

日本語のフォントを1本決めてプロジェクトに入れ、RichTextLabelで1文の中に色や揺れを混ぜる方法を解説します。

日本語のゲームを人に配るなら、ゲームの文字に使うフォントを1本決めて、プロジェクトに入れておきます。会話やメッセージで、1文の中の一部だけ色を変えたり揺らしたりするには、RichTextLabel を使います。

フォントを入れなくても、Label の日本語はそのまま読めます。ただ、それは OS のフォントが字を埋めているからで、太字にしたときや配った先のPCで見た目が変わり、Web版では四角が並びます。

この記事では、プロジェクトの字を1本に決める手順と、RichTextLabel で1文の中に色や揺れを混ぜる方法を解説します。

OSに埋めてもらった字は1行の中で書体が割れ、自分で決めた字はそろったまま一部だけ太字や色にできる

この記事でわかること

  • フォントを入れていないのに日本語が読める理由と、そのままにしない理由
  • FontFile を1本入れて、太字の枠までそろえる手順
  • RichTextLabel に変えたときに、Label から変わるもの
  • 実践:同じ文を Label と RichTextLabel で並べて、色と揺れを足す

動作確認環境: Godot 4.7(Windows)

Sponsored

OS のフォントが埋める日本語

新しいプロジェクトの Label に「こんにちは」と入れると、そのまま読めます。フォントは何も設定していません。

Godot の既定のフォントは英数字用で、日本語の字を持っていません。Godot 4 は、いま使っているフォントに無い字を OS のフォントで埋めます。Windows にも macOS にも日本語の入ったフォントがあるので、読めてしまいます。

便利なようで、困るのはここからです。

  • 環境で字が変わる: 埋める側のフォントは、配った先のPCで変わります。書体だけでなく字幅や行の高さも変わるので、自分の画面で収まっていた枠から、先のPCでははみ出すことがあります
  • 1つの文の中で書体が割れる: 英数字は既定のフォント、かなと漢字は OS のフォント、という混ざり方をします
  • Web では四角になる: ブラウザの中には、埋めてくれる相手がいません(Webエクスポート入門)
英数字は細い直線的な書体、かなと漢字は太めの丸い書体で割れている行と、全部そろっている行の比較

四角が出ないことと、字が決まっていることは別です。自分のPCで読めているうちは、割れていても気づきません。

Sponsored

フォントの入れ方(FontFile と Custom Font)

フォントに関わるリソースは3つあり、役割が違います。

FontFileはファイルを読み込んで配る本線、SystemFontはOSから探し、FontVariationは元のフォントの太さや字間だけ変える
  • FontFile: .ttf や .otf を読み込むリソース。ファイルごとゲームに入るので、そのファイルが持っている字は、どこで動かしても同じになります
  • SystemFont: 家族名と太さを指定して、実行した環境の OS から探すリソース。容量は増えませんが、見つからない環境では別のフォントに落ちます
  • FontVariation: 元のフォントを包んで、太さや字間だけを変えたものを作るリソース。別の書体にはなりません

入門の本線は FontFile です。日本語の入った .ttf か .otf を1つ用意して、プロジェクトのフォルダにコピーします。配布が許可されているものを選んでください。

他のエンジンでいうと: FontFile は、Unity の TextMeshPro のフォントアセットにあたります。TextMeshPro はフォントファイルから字を焼いたアセットを別に作りますが、Godot はファイルをそのまま読み込んで使います。

プロジェクト設定のGUI > Theme > Custom Fontに入れたフォントが、Label・Button・RichTextLabelへまとめて届く

置き場所は1か所です。プロジェクト設定の GUI → Theme → Custom Font に、そのファイルを指定します。ここはプロジェクト全体の受け皿なので、個別に何も設定していない Control は全部これになります。この設定はエディタの起動時に読み込まれるので、入れたら「Project > Reload Current Project」で開き直してください。

Theme をどこに刺すか、どこで継承が切れるかは Theme入門 の話です。この記事で足すのは、受け皿に1本入れる、という1行だけです。

太字の枠(bold_font)

フォントを入れる枠の名前は、ノードによって違います。Label と Button は font の1つだけです。RichTextLabel は、通常・太字・斜体・太字斜体・等幅の5つに枠が分かれています。

Labelのフォントの枠はfontの1つだけ。RichTextLabelはnormal_fontやbold_fontなど5つの枠に分かれている

[b] のように角括弧で囲んだ書式の指定をタグと呼び、この書き方を BBCode と呼びます。[b] は「その字を太くする」のではなく、bold_font の枠へ切り替えるタグです。同じように、斜体の [i] は italics_font、等幅の [code] は mono_font へ切り替えます。ここでよくあるのが、normal_font だけを上書きして終わることです。通常の字は新しいフォントに変わり、太字の枠はもとのままなので、[b] を付けた単語だけ別の書体で出ます。

normal_fontだけ上書きすると「太い」だけ別の書体になり、bold_fontにも同じ家族のBoldを入れるとそろう

プロジェクト設定の Custom Font で入れた場合は、少し違う出かたをします。太字の枠も、その同じフォントから合成して作られます。書体は割れませんが、線が均一に太るので、画数の多い漢字はにじみます。

どちらの場合も、同じ家族の Bold を用意して bold_font にも割り当てるのが確実です。ファイルが2つになりますが、そのぶん結果がはっきりします。

RichTextLabel と Label の違い

文全体が同じ見た目なら Label で足ります。名前、HP、ボタンの文字がこれです。

1つの文の中で太さ・色・サイズ・揺れを混ぜたいときだけ RichTextLabel にします。そのとき、いくつか勝手が変わります。

  • bbcode_enabled の既定はオフ。インスペクタの Text に書いたタグは、そのまま文字として出ます
  • LabelSettings(Label に色・フォント・サイズをまとめて渡す設定)は効かない。フォントとサイズは、テーマの上書きで枠ごとに入れます
  • scroll_active の既定はオン。枠に入らない行はスクロールの向こうに回ります
scroll_activeがオンだと3行目が枠で切れ、fit_contentをオンにしてscroll_activeを切ると枠が伸びて3行とも見える

会話の1行や入手表示のように全部見せたいときは、scroll_active をオフ、fit_content をオンにします。fit_content は字を枠に押し込むのではなく、ノード自身の最小の大きさを中身に合わせます。コンテナの中でなくても、そのぶん伸びます。

折り返しと一緒に使うときは、折り返す幅も決めておきます。Custom Maximum Size の幅に数値を入れ、高さは -1(上限なし)にします。

コードから入れるときは、メソッドが3つに分かれます。

  • add_text(): 解釈しない。[b] がそのまま出る
  • append_text(): 解釈して、うしろに足す
  • parse_bbcode(): 解釈して、中身を置き換える

bbcode_enabled がオフでも、append_text() と parse_bbcode() はタグを解釈します。この2つは Text 欄とは別の経路です。

よく使う BBCode のタグ

入門で使うタグは、この5つです。

タグ何をするか引数
[b]bold_font の枠へ切り替えるなし
[color=#4a90e8]その区間だけ色を変える色名か # つきの16進
[font_size=28]その区間だけサイズを変える数値
[wave amp=10 freq=3]上下に波打たせるamp(揺れの大きさ)・freq(速さ)
[shake rate=20 level=5]不規則に揺らすrate(速さ)・level(強さ)
太字・色・大きさ・波打ち・揺れの5つのタグを、それぞれの効果が掛かった文字と並べた図

amp は省略すると大きめの値が入ります。本文サイズで使うなら、10 くらいの小さい値から始めて、上下が欠けないところを探してください。

タグが画面にそのまま出るときは、次の順に見ます。

  • bbcode_enabled がオフのまま
  • タグ名が大文字になっている。[B] や [COLOR] は効かない
  • 全角の角括弧を使っている。[color=red] は見た目が似ていても別の文字
  • [ とタグ名のあいだ、または = の前後に空白が入っている
  • 閉じタグが無い。そこから後ろ全部が同じ効果のままになる
Sponsored

実践:同じ文を2つ並べて、見比べる

ショップの入手メッセージ、クエストの更新、ダメージの横に出る状態名——1文の中で色や太さを変えたい場面はどれも同じ形です。同じ文字列を Label と RichTextLabel に入れて、並べて見比べます。

① 置くもの

新しいシーンを1つ作ります。日本語の入ったフォントを、同じ家族の Regular と Bold の2つ用意し、プロジェクトのフォルダにコピーします。プロジェクト設定の GUI → Theme → Custom Font に Regular を指定したら、エディタを開き直してください。

  • ルートに Control を置いて Main。Anchors Preset を Full Rect、main.gd を付ける
  • Main の子に PanelContainer(背景の板を敷いて中身を包む入れ物)を置いて Box。Anchors Preset を Center、Custom Minimum Size を (420, 0)
  • Box の子に VBoxContainer を置いて Rows
  • Rows の子に Label を置いて PlainLabel。テキストは あア漢字A1 太い、Theme Overrides の Font Sizes → Font Size を 24
  • Rows の子に RichTextLabel を置いて Rich。Text は空のまま
  • Rich の BBCode Enabled をオン、Fit Content をオン、Scroll Active をオフ、Autowrap Mode を Word Smart(収まらない長い語も途中で折る)、Custom Maximum Size を (404, -1)
  • Rich の Theme Overrides → Fonts で、Normal Font に Regular、Bold Font に Bold を割り当てる
  • 同じく Font Sizes で、Normal Font Size と Bold Font Size を両方 24 にする
  • Rich は、右クリックメニューの「Access as Unique Name」をオンにする(コードから %Rich で取れるようになる)

PlainLabel と Rich の1行目を同じ文字列にしているのは、同じ字の形を並べて見比べるためです。サイズもそろえないと、太さの違いなのか大きさの違いなのか分かりません。

揺れる文字が上下で欠けるときは、Rich の Theme Overrides → Styles → Normal の空の欄から「New StyleBoxEmpty」(何も描かないスタイル)を作って、上下の Content Margin(枠の内側の余白)を足します。RichTextLabel は枠の外を切り取って描くので、揺れの分だけ内側に余白を取ります。

② 組み立て

# main.gd
extends Control

const LINE := "あア漢字A1 [b]太い[/b]\n[color=#4a90e8]青い[/color] [wave amp=10 freq=3]ゆれる[/wave]"

@onready var rich: RichTextLabel = %Rich

func _ready() -> void:
	_show_parsed()

func _unhandled_input(event: InputEvent) -> void:
	if event is InputEventKey and event.pressed and not event.echo:   # echo は押しっぱなしの連打。最初の1回だけ拾う
		if event.keycode == KEY_T:
			rich.clear()
			rich.add_text(LINE)        # 解釈しないので、タグがそのまま出る
		elif event.keycode == KEY_R:
			_show_parsed()

func _show_parsed() -> void:
	rich.clear()
	rich.append_text(LINE)             # 解釈して入れる

clear() が消すのは表示だけで、インスペクタの Text は変わりません。そこを空にしてあるので、コードから入れたものだけが見えます。

③ 動かして確かめる

同じ1行が上下にそろって並び、下の「太い」だけが同じ家族のまま太く、「青い」は色付き、「ゆれる」は波打つ

F6(いま開いているシーンだけを再生)で再生すると、上の Label と下の RichTextLabel の1行目に、同じ あア漢字A1 が同じ形・同じ大きさで並びます。形が違うなら、Custom Font の開き直しが済んでいないか、どちらかのノードに別のフォントの指定が残っています。下の 太い だけは、同じ家族のまま太くなっています。

Rich の Bold Font の割り当てをいったん外すと、太字は Custom Font の Regular からの合成に切り替わり、線が均一に太って漢字の中がつぶれ気味になります。戻すと、その家族の Bold らしい形に戻ります。

2行目は、青い の2文字だけ色が変わり、ゆれる だけが上下に動きます。[b] や [color] という文字そのものは画面に出ていません。ゆれる の上下が欠けるなら、Content Margin を増やします。

T キーを押すと add_text() に切り替わって、タグがそのまま並びます。R キーで戻ります。bbcode_enabled はオンのままなのに見え方が変わるのは、入れるメソッドが違うからです。

ポイントは2つです。

  • 読めているのと、決まっているのは別: OS が埋めてくれるので、四角が出ないうちは気づけません。Custom Font に1本入れると、そのフォントが持つ字はそのゲームの字になります
  • 枠の名前はノードで違う: Label は font の1つ、RichTextLabel は normal_font と bold_font などに分かれます。片方だけ変えると、そこで割れます

文字を1つずつ送る書き方は 会話システム入門 にあります。visible_characters が数えるのは表示される文字なので、解釈されたタグは含まれません。

うまくいかないときは

症状原因直し方
フォントを入れたのに、一部の記号や古い漢字だけ書体が違う入れたフォントに無い字は、今も OS のフォントが埋めているその字を持つフォントを選ぶか、フォントのインポート設定の Fallbacks(字が無いときに代わりに探すフォントの一覧)に、字を持つフォントを足す
フォントを変えたのに、変わったのはエディタの字だけだったエディタ設定(Editor Settings)の Interface > Editor > Fonts > Main Font を変えているゲームの字はプロジェクト設定の GUI → Theme → Custom Font に入れる
[b] と [i] を重ねた区間だけ、別の書体になる太字斜体は bold_italics_font という別の枠を使う斜体も使うなら、その枠にも同じ家族のフォントを入れる

おまけ:先に知っておくと良いこと

  • 可変フォントで太字を作る: 1つのファイルで太さを変えられる可変フォントなら、FontVariation の variation_opentype で太さの軸(キーは "weight")に 700 を入れて、太字を作れます。この太さの軸は可変フォントにだけ効き、静的な Regular に入れても、エラーは出ないまま字は細いままです
  • 容量とロードの一瞬: 全言語ぶんのCJK(中国語・日本語・韓国語)フォントは数十MBになります。画面に出るのは使った字だけでも、ファイルはまるごとパッケージに入ります。Regular と Bold の2本、または可変の1本にとどめておくと、書き出しが軽くなります
  • 同梱するなら配布条件を確かめる: フォントをゲームに入れて配るのは再配布にあたります。ライセンスによっては表示が要ります
  • 折り返しは Word Smart で足りる: 日本語の文には空白がありませんが、Word も Word Smart も、文字の種類から折れる位置を見つけます

まとめ

  • 読めているのはOSのおかげ: 既定のフォントに無い日本語は OS のフォントが埋める。環境で変わり、Web では四角になる
  • 本線は FontFile を1本: プロジェクト設定の Custom Font に入れて、エディタを開き直す
  • 太字は別の枠: RichTextLabel は normal_font と bold_font に分かれる。bold_font にも同じ家族の Bold を入れる
  • タグの解釈は経路で決まる: bbcode_enabled の既定はオフ。append_text() と parse_bbcode() はオフでも解釈する
  • 全部見せるなら2つを逆に: scroll_active をオフ、fit_content をオン。折り返すなら幅の上限も決める

自分のゲームの Label を1つ選んで、英数字と漢字が混ざった文を入れてみてください。文字の高さや太さが途中で変わっていないでしょうか。

次に読む学習パスの次の記事
UI

シンプルなダイアログシステムの作り方(テキスト、選択肢、分岐)

この記事を読む
Godot このセクションのノート104