ウェブフォントが使える環境がだんだんと揃ってきて、便利なシンボルフォントも増えてきました。

そんななかでお気に入りなのが、合字（リガチャ）でアイコンを出せる LigatureSymbols というフォント。

日本製なので日本特有のウェブサービスのアイコンもあったり、リガチャなので、フォントを読み込めなかったり、ブラウザの設定などで強制的にフォントが書き換わっても意味は通るというのが素敵なフォントですが、Firefoxで特定の条件下にあるときだけ、うまく動かないことが判明しました。

FirefoxでLigatureSymbolsがうまく表示されない

結論からいいますと、

• Firefoxをつかっている
• 合字を使っている
• letter-spacing の値が初期値以外になっている

の条件がそろうと、合字がくずれてしまい、LigatureSymbolsでいうとアイコンが出なくなるようです。

bug 5647 – [Cairo] letter-spacing が 0 でない場合、リガチャを使うべきでない

普段は特に指示もなくデザイン的にもそうする必要性がないため、あまり letter-spacing の設定はしないのですが、今作ってるサイトはたまたま letter-spacing を調整していました。そのため、Firefoxで表示した際に、上記の問題が発生して、アイコンが表示されなくなり、ただのテキストに化けてしまっていたようです。

ただ、どういうわけか Windows版 Firefox 18（XP）だと問題なく表示されていました。どうなってんのこれ…。

対策方法

デフォルトというか公式に書かれているやりかたそのままで使っているならば、
.lsf .lsf-icon:before の2つに letter-spacing: normal !important; を追加すれば、アイコンフォント使用時は強制的に letter-spacing をリセットできますのでこの問題は回避できます。

因みにCSS内で、after とかに content で入れる場合はUnicode（\E07f とか）で入力するのでそもそもこの問題は起こらない…はず。たぶん。

あと地味にデスクトップ版 Safari が対応してないっぽいのが気になる所。（これにかぎらず jquery.ligatures.js みたいなのでもダメみたい）

ff, fi, flなどの合字（リガチャ）を自動処理するjQueryプラグイン – フォントブログ
Can I use… Support tables for HTML5, CSS3, etc

とりあえず今回は時間もないし、アナリティクスみてもSafariユーザーがほぼいなかったのでとりあえずは一旦このままでOKということになりましたが、いずれ修正する必要があるかも。

リガチャなので、対応していなくてももとの単語にもどるだけで一応意味は通るというのが救いですね。