ゴシック体を指定したのにSafariで明朝体になっていた件

コラム

はじめに

クライアント様のサイトチェックでSafariで確認したところ、ゴシック体(Noto Sans JP)になっているはずの部分が明朝体になっていました。

cssのfont-familyに下記が指定されていました。

font-family: "見出ゴMB31";
font-family: "見出ゴMB31";
font-family: "TBUDゴシック R";

「TypeSquare Webfonts for エックスサーバー」というプラグインの仕業でした。

XserverでWordPressを簡単インストールした時に、自動でインストールされるプラグインです。

「TypeSquare」はモリサワ社が開発したフォントです。

「TypeSquare」は、多くのフォントファミリーとスタイルを提供しており、ウェブサイトのデザインに多様性をもたすというメリットがあります。そのためさまざまな業界やテーマに合ったフォントを選択できます。

具体的にどのようなフォントがあるかは下記サイトで確認ができます。

TypeSquare

モリサワのWebフォントサービスTypeSquareは多彩で魅力的な書体でWebサイトの表現の幅を広げます。大規模サイト…

今回自分が携わっているサイトでChromeならゴシック体のところがSafariで明朝体になったようにブラウザ間で差異が生じるのがデメリットです。使用するときはブラウザチェックが欠かせないですね。

今回基本フォントはNoto Sans JPを使用していたため、プラグインを無効化しSafariでもゴシック体(Noto Sans JP)で表示されるようにしました。