Furigana, set by the font. A Japanese font that shows furigana by itself. The text stays plain: no <ruby> markup, no JavaScript, no plugin. It works everywhere that supports custom fonts.
Check out the demo and playground on furifont.antfu.me
<p class="furifont">今日は日本語の勉強をします。</p>
<style>
.furifont {
font-family: 'Furifont Sans';
line-height: 1.7;
}
</style>Furifont is compiled from Source Han Sans JP or Source Han Serif JP. A build step reads a dictionary of thousands of words and draws the furigana into new glyphs. For each word, the font holds a ligature: 今日 becomes one glyph with きょう above it. Longer words win (日本語 before 日本), and a kanji with no clear reading stays bare. Details on the website and in docs/design.md.
Warning
Furigana might be incorrect, due to the limits of fonts: a font sees one run of kanji at a time, not the sentence around it. Keep that in mind when you read.
Each release has Sans and Serif, in Hiragana and Romaji, Regular as OpenType and WOFF2, and a variable font of every weight from ExtraLight to Heavy (Furifont Sans VF), as TrueType and WOFF2, whose furigana follows the weight of the text. Set line-height to 1.6 or more so the furigana is not clipped.
For vertical text (writing-mode: vertical-rl), each family also comes as a variable font with the furigana right of the kanji (Furifont Sans Vertical VF). It shows furigana in vertical text only. Set line-height to 2.2 or more so the furigana stays in its column.
The website has a bookmarklet and a userscript that set any page in Furifont, with optional okurigana readings.
Choose another base font, word list, furigana letters or sizes. Needs Node 22.18 or later.
npx furifont dev # Customize: live preview in your browser
npx furifont build --base "Source Han Serif JP Bold" --script hepburn --family "My Furigana"
npx furifont build --orientation vertical --family "My Furigana Vertical"Settings live in furifont.config.json; their defaults are in packages/core/src/defaults.ts.
| Package | |
|---|---|
furifont |
The CLI and the server behind Customize |
@furifont/core |
Plans glyphs and OpenType rules from a dictionary |
@furifont/compiler |
Draws the planned glyphs into a base font |
@furifont/dictionary |
The compiled dictionary |
@furifont/helper-web |
Sets the Japanese text of any web page in Furifont: the bookmarklet's and the userscript's engine |
packages/app |
The website and Customize (Nuxt) |
See CONTRIBUTING.md to work on it.
Furifont is inspired by:
- Mengshen-pinyin-font, which puts pinyin on Chinese characters inside the font.
- Fira Code, which uses OpenType ligatures to change how text looks.
- Code: MIT.
- Fonts: SIL OFL 1.1, derived from Source Han Sans and Serif by Adobe.
- Dictionary data and reading rules: CC BY-SA 4.0, from JMdict, JMnedict, KANJIDIC2 (EDRDG), JmdictFurigana, yomitan-jlpt-vocab and Tatoeba (CC BY 2.0 FR), with place names from Japan Post's postal code data and JR station names from Desktop Tetsu.