スタイルシートでフォントがセットできない。

ɓïѕu͏ƙǝ🎌

スタイルシートを弄ってて気がついた事があります。

長い間Macに自分で~/Library/Fontsにインストールしたフォントをスタイルシートで設定してこなかったけど、試しにフォントを設定してみたらSafariではフォントが正常に表示されません。

@font-face {
  font-family: FontTest;
  src: local(Lato);
}

.test1 {
  font-family: FontTest;
}

または

.test2 {
  font-family: Lato;
}

テスト環境

  • macOS 12.4 (21F79)

  • Safari 15.5 (17613.2.7.1.8)

  • Firefox 100.0.2

Firefoxはどちらでもフォント設定が反映されるが、Safariでは両方で反映されずSafariのデフォルトフォントのSerifで表示されてしまいます。

昔からこんな仕様だったか最近の問題か不明だけど、なんにしてもこれは改善して欲しいですが、どうせAppleに言っても何もしてくれないので言いませんが…

この記事は過去にTumblrで扱って(2023-05-27)、移転後に再掲載しました。