Noto Sansにletter-spacingをかけるとSafariで発生するバグと回避方法

Google FontsのNoto Sans JPを使ってバグが出たので、バグが発生する条件と回避方法をシェアします。

バグが発生する条件

1. CSSでNoto Sans JPを@importで読み込む
2. letter-spacingをかける
3. 小文字の「f」と「i」を並べて使う

Safariで閲覧すると、下のように「f」と「i」にletter-spacingがかからなくなりました。

※Chrome、IE、firefoxでは問題ありませんでした。
※小文字の「f」を大文字の「F」に変えたところ（「i」は小文字のまま）、Safariでも問題なくletter-spacingがかかっていましたので、小文字の「f」と「i」が並んでいる時に発生するようです。
※他の文字列でも起こる可能性があります。

バグの回避方法

いろいろと検索したところ、このバグについて書かれているページがなく、Noto Sans JP指定時、濁点文字と句読点が重なって表示されるバグ？と回避方法（→修正済？）を参考に、「f」と「i」の間にコメントを入れると、バグを回避することができました。

Prof<!-- コメント -->ile

あとがき

Windowsの環境でホームページを制作していると気付きにくいバグなので、一人でも多くの方に知ってもらえるように、拡散してもらえるとありがたいです。