Furifont、ふりがなをフォントだけで表示

子ども向けの文章を書くとき、漢字ひとつひとつにふりがなを振ろうとして、心が折れたことはないだろうか。HTMLなら<ruby>タグでふりがなを出せるが、文章中の漢字すべてに手作業で書いていくのは現実的ではない。

2026年10月15日、この面倒を「フォントを差し替えるだけ」で解決するというオープンソースのフォントが公開された。名前は「Furifont」。<ruby>タグもJavaScriptも使わず、既存のテキストにふりがなが自動で乗る(Furifont公式README)。しかも「今日」のように読み方が複数ある漢字でも、見えない文字を1つ添えるだけで読みを切り替えられるという。これを実現しているのは、どんな仕組みなのか。

タグもJSも使わない理由

ふりがなを出すには<ruby>タグかJavaScriptが要る、というのがこれまでの前提だった。Furifontはなぜそれを飛ばせるのか。

元になっているのはAdobeの源ノ角ゴシック(Source Han Sans)と源ノ明朝(Source Han Serif)だ。作者はフロントエンド開発ツールで知られるAnthony Fu氏で、この2書体をベースにしている。数千語分の辞書を参照しながら、ふりがなを描き込んだ新しい文字の形を生成し、フォントファイルに埋め込んだ(Furifont公式README)。たとえば「今日」という2文字の並びは、「きょう」という読みを上に乗せた1つの合字(リガチャ)になる。

合字にする範囲は辞書の語の長さで決まり、長い語が優先される。「日本語」という3文字は、「日本」という2文字よりも先に選ばれる(Furifont公式ドキュメント)。ふりがなの位置合わせも読みの判定も、フォントファイルの中であらかじめ済んでいる。ブラウザは、いつもどおりのテキストにいつもどおりのフォントを当てているだけだ。では、同じ漢字が複数の読みを持つ場合はどうするのか。

複数の読みをどう切り替えるか

「今日」は「きょう」とも「こんにち」とも読む。地名や人名まで含めれば、1つの漢字の並びが複数の読みを持つケースは珍しくない。Furifontの辞書は、新聞での使用頻度やTatoebaの例文、人手で作ったリストなどをもとに読みごとにスコアを付ける(Furifont公式ドキュメント)。既定では、最もスコアの高い読みを選ぶ。

ここで使われているのが、Unicode異体字セレクタ(variant selector)という、画面には何も表示されない制御文字だ。公式ドキュメントによると、Furifontは「VS225」から「VS240」までの16種類の異体字セレクタを使う。これをフォント内部の対応表(cmap format 14)に割り当てている(Furifont公式ドキュメント)。語の最初の漢字の直後では語全体の読みを、それ以外の位置では個々の漢字の読みを選べる。

CSS側からfont-feature-settings: "salt" nを指定しても、同じ切り替えができる(Furifont公式ドキュメント)。見えない文字を1つ足すだけなので、画面に出ている文字列そのもの(検索やコピペの対象になる文字コード)は変わらない。変わるのは、ふりがなの見え方だけだ。読みの選択までフォントの中で完結していると分かると、次に気になるのは、自分のサイトやアプリに入れたとき何が起きるかだ。

導入前に確認すべき点

実際に差し込む前には、何を確認しておけばいいのか。公式ドキュメントは、次の制限を挙げている。

• 行の高さ(line-height)が1.6未満だと、ふりがなが上下で切れる(Furifont公式ドキュメント)
• 行をまたいで折り返される語は、ふりがなが欠けたり変わったりする。Chromium系ブラウザではword-break: auto-phraseという設定で和らげられる(Furifont公式ドキュメント)
• 「書く」「行く」のように送り仮名が別の要素に分かれる活用形は、ふりがなの付かない裸の文字になる(Furifont公式ドキュメント)
• テキストノードを直接書き換えるタイプのフレームワークでは、表示が乱れることがある(Furifont公式ドキュメント)
• 動作確認はブラウザでの表示を中心に行われており、macOSのCoreTextやWindowsのDirectWriteでの動作は未検証と明記されている(Furifont公式ドキュメント)。ネイティブアプリへの組み込みを考えている場合は、この点を踏まえておきたい

書体はSansとSerifの2系統、ふりがなはひらがなとローマ字から選べる。標準のウェイトはOpenTypeとWOFF2、太さを変えられる可変フォントはTrueTypeとWOFF2で配布されている(Furifont公式README)。技術的な条件が分かったところで、次に気になるのはライセンスの扱いだ。

商用やカスタマイズの自由度

商用のサイトやアプリに組み込むとき、ライセンスの扱いはどうなるのか。

ライセンスは対象ごとに3つに分かれている(Furifont公式README)。

フォント本体のOFLは、元になった源ノ角ゴシック・源ノ明朝から引き継いだものだ。商用サイトやアプリへの組み込み・配布を無償で認め、改変した版を配る場合だけ同じOFLを使うよう求める。

自分で辞書やふりがなの文字種・大きさを変えたい場合は、2通りの方法がある。1つは、Node.js環境でnpx furifont buildを実行し、furifont.config.jsonで設定を変える方法だ。もう1つは、公式サイトの画面上で元のフォント・単語の量・ふりがなの種類を選んでビルドする方法だ(Furifont公式README)。

手元のページに試しに当てるだけなら、ビルドは要らない。ブックマークレットか、Tampermonkey/Violentmonkey向けのユーザースクリプトが使える。どちらも、任意のWebページにこのフォントを適用できる(Furifont公式README)。

自分が意外だったのは、作者がAnthony Fu氏だったことだ。Vite・Vue・Nuxtのコア開発チームに名を連ねる、フロントエンドのビルドツールで知られる人物だ(Anthony Fu氏の公式サイト)。最初のリリースv0.1.0から今回確認したv0.5.1までの5回のリリースは、2026年10月15日未明から翌16日朝までの、わずか30時間ほどに収まっている。「再掲載」の読みを「さいけいさい」に直すといった辞書の誤り修正も、その間に入っていた(antfu/furifont Releases)。公開してからも読みの精度を直しながら動かしている最中だと分かる。

まとめ

Furifontは、フォント内のリガチャと異体字セレクタを組み合わせることで、<ruby>タグやJavaScriptなしに日本語の文章へふりがなを表示する。読み方が複数ある漢字も、見えない制御文字を1つ添えるだけで読みを切り替えられる。導入する前には、3点を確認しておきたい。行の高さを1.6以上にし、行をまたぐ語や送り仮名を含む活用形では読みが欠けたり変わったりすると知っておく。ブラウザ以外の環境では、動作がまだ検証されていない。試すだけなら、公式サイトからフォントをダウンロードするか、ブックマークレットで手元のページに当てられる。