This is a font for displaying the pitch marks above Japanese kana words. It's not good for sentences.

How to use.
Just type 2 numbers above the kana. The number of mora in a word and it's pitch number. For example you would type 3 and not 4 for かいしゃ since the しゃ is one mora. Find a dictionary that has the pitch numbers like Jsho (not all dictionaries have them) and use that number as the 2nd number.

30
かいしゃ

When centering be sure to add a non breaking space after the kana so everything stays lined up.

30
かいしゃ(put a non breaking space here if you center or right align your text)

If the number of mora is beyond 9 use upper case letters. This font can do up to up to 13 mora (バニラクリームフラペチーノ).
Use capital A for 10.
Use capital B for 11.
Use capital C for 12.
Use capital D for 13.


Known issues
1.) Chrome for windows needs font hardware acceleration turned off when rendering long pitch accents (like 8 or more mora). This does not seem to affect Chrome for Android.
2.) Chrome has a bug that disables ligatures in Unicode characters when the liga tag is used. This causes the spacing for しゃ and others kana ligatures to be off.
https://bugs.chromium.org/p/chromium/issues/detail?id=443467&q=ligature&can=2


I am an amateur at creating fonts. I am providing this font as is (don't expect any replies to issues you may have). This font was created by modifying the open source SourceHanSansJP-Regular font. I adjusted the spacing, added ligatures, added pitch marks and removed the kanji to reduce the file size.

<style type="text/css">
@font-face{
    font-family:"kana-word-pitch-word-pitch";
    src:url("https://fontsme.com/wp-data/k/950/23950/file/KanaWordPitch-X3rE9.otf") format("woff"),
    url("https://fontsme.com/wp-data/k/950/23950/file/KanaWordPitch-X3rE9.otf") format("opentype"),
    url("https://fontsme.com/wp-data/k/950/23950/file/KanaWordPitch-X3rE9.otf") format("truetype");
}
span.font0{font-family:"kana-word-pitch-word-pitch";font-size:95px;text-transform:none;}
</style>