Mac+FirefoxでAdobe Fonts「貂明朝」に色が付かない問題

Webフォントを使うときにお世話になっているAdobe Fonts
その中の「貂明朝」(てんみんちょう)というフォントを使ったときに起きた問題について紹介。

発生した問題

MacのFirefoxで開いたときにだけ、color指定をしているにも関わらず文字の色が黒になる。その他のブラウザではIEも含めて問題なく表示されるのになぜかFirefoxだけ、それもMacでのみ問題が起こる。

対処法

配置を変える方法はいくつかあるが、文字色を変える方法はcolorしかない。
そこで文字色を変えるのではなく、背景色を変えて文字で切り抜くという方法をとることにした。

-webkit-background-clipはだいたいのブラウザで使えるがIEでは適用されず塗りつぶしの状態になるので、CSSハックでIEだけ背景色を無しにした。

.tenmincho {
    color: #f00; /* 文字色(Firefox以外のブラウザ用) */
    background: #f00; /* 背景色(Firefox用) */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*
CSSハック(以下はIE11の場合)
*/
@media all and (-ms-high-contrast: none) {
    *::-ms-backdrop,
    .tenmincho {
        background: none;
    }
}

注意点として、ここでbackgroundを使うので背景を指定できない。
例えばボタンを作る時に<a>タグで背景色を指定したい場合は<a>タグの中に、さらに<span>などで囲う必要があります。

今のところこの方法以外で対処法が思いつかないです。
というか「なぜ貂明朝だけ」しかも「Firefoxだけ」。

ただ貂明朝のためだけにここまで手間をかけるよりか、近いフォントに変える方がいいのでは？とも思いました。

Shuei Mincho (medium)
https://fonts.adobe.com/fonts/dnp-shuei-mincho-pr6n
Toppan bunkyu
https://fonts.adobe.com/fonts/toppan-bunkyu-mincho-pr6n