結論
br {
font-family: sans-serif !important;
}
以上です。
そもそもトーフバグとは
コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□:通称"豆腐")が表示されること。
ちなみに GoogleFonts の NotoFont は No Tofu("豆腐"が現れることがなくなるように)という意味を込めて名付けらたそうです。
現象
私の環境では既存のウェブフォントをサブセット化して軽量にしたものを読み込んでいるのですが
なぜかWindows の IE11 上で改行コード(brの部分)にトーフが出現してしまいました。
MacとWindowsでは改行コードが違うため( \n
と /r/n
)、サブセット化の際にWindowsの改行コードも含めればいいのかなと思ったのですが、その方法がわかりませんでした。
そして色々悩んだ末、結論上記の方法で取り急ぎ解決しました。
ただ、元々のウェブフォント適応部分のスタイルも
.webfont {
font-family: "webfont", sans-serif;
}
としているので、 "webfont"
にない文字は sans-serif
にフォールバックされる想定だったのですが
なぜかうまくいかず、 br
への直接指定(念の為important)で解決しました。
サブセット化段階で解決する方法があればコメントいただけますと幸いです。