【22/6/27更新】macOS12 Safariから「游ゴシック」が消えた対策

2022/06/27 (自分なりの)游ゴシック代替フォントのCSS指定方法を追加。
2022/06/23 日本語WEBフォントTypeSquareの利用規約について。
2022/02/18 当サイトのフォントを強制的に游ゴシックにしました。詳細はページの最後に。

2021年の仕事納めはAppleのスペシャリストさんと電話、でした。

今日、Macを新調したのですが、開封早々、デザイン案件に支障が出る事態となったためです。

新しいMacのSafariを開くと、あらゆるWEBサイトに使われている『游ゴシック体』が消滅していました。
パッと思いつくサイトはいくつか巡回したのですが、綺麗さっぱり消えています。例えば、私の好きなロックバンドのオフィシャルサイトとか、敬愛するGCPさん、ラボさん、パルミーさん、wordpressテーマ「SWELL」の公式でも游ゴシック体は反映されません。

このブログもSWELLがベースで、日本語フォントも「游ゴシック体」を指定しています。

それから、自分がデザインしたクライアントのサイトやLPも游ゴシック体を使ったサイトは全滅でした。(全滅というと大袈裟ですが、ヒラギノに置き換わっているだけなので文字が読めないわけではない──けど困った💦)

『Monterey Safari フォント』などで検索をしても同じ症状の報告が見つけられませんでした。最近はスマホでアクセスする人の方が多いのと、いろいろなフォントメーカーからWEBフォントがたくさん日本語対応になったので、多くの人が気にしていないのかもしれません。今日ずっと探してて、それっぽい症状の情報があったのはTwitterで2件でした。

あと意外な発見ですが、ロゴやサムネ画像は游ゴシックで作っているけど、サイトの本文はデフォルト(ヒラギノなど)のまま、っていうブランドサイトも結構あって『ロゴの游ゴシック感がそれだけ強い!』って思い知らされました。

──さっそく新旧2つのMacで検証しました。それからChromeとも比較してみました。

旧MacBook Pro 2018モデル新MacBook Pro 2021モデル
macOS11.6.1(Big Sur)12.1(Monterey)
CPUIntel Core i7Apple M1 Pro
Safariバージョン15.115.2
Chromeバージョン96.0.4664.11096.0.4664.110
游ゴシック体が消えたのは右のMonterey
ヒラギノになっちゃいますね

Apple公式のトラブルシューティングやOSの再インストールもしたのですが、結果は変わらず。
最後に、スペシャリストさんと電話で解決方法を探すことになりました。

今日の時点での結論は、このMac個体に起きた問題ではなく、OSに由来するものであろうと推測まではできましたが、さらに深掘りするためには年末年始を越してからになります。クライアントにもし質問されたら、大きなトラブルではないことをお伝えするしか、今できることはなさそうです。当面はChromeで動作確認をしましょう。

ちなみに、游ゴシック体の公式サイト(字游工房モリサワ)は問題なく表示されています。公式サイトの表面的なコードを見てもすぐに違和感を見つけることはできなかったので、(→TypeSquareさんかなと思います。TypeSquareについては次の段落をご参照ください。)

引き続きAppleさんの回答を待ちます。

続報はこちらのページでお伝えします。

2022/01/21 UPDATE:
Appleさんからの回答は「OSアップデート(Safariも一緒にアップデート)」で直せるように頑張るから待っててくださいっていうかんじでした。次回の?もしくはその次か次の次か、タイミングはわからないですがアプデに期待しましょ〜!!

INDEX(この記事の目次)

TypeSquareでWEBフォントを指定

2022年2月18日現在、まだOSアップデートでなおりそうもないので、一時的な解決策を置いておきます。PV数がさほど多くなければ費用はかけずにできることなので、游ゴシック体が恋しいみなさまご検討ください。

Webフォントサービス「TypeSquare」さんで1書体だけお借りしました。
手順はシンプル。会員登録をして専用タグをコピペするだけです。ただし見出しは別の書体にしています。

この方法でフォントを指定すると、スマホでも指定のWEBフォントが見えるんじゃないかと思います。手持ちのiPhoneでしか確認していませんが、これはこれで嬉しい誤算でした!!

2022/06/23 UPDATE:
参考にしていただいたみなさま、残念なお知らせです。2022年8月からTypeSquareの利用規約が変わります。無料プランの1万PV/月→1,000PV/月に変更となります。超えたら翌月までフォント配信されないそうです。詳しくはこちらの公式サイトをご覧ください。

2022年6月現在:日本語のWEBフォントCSS指定方法

2022/06/27 UPDATE:以下。

游ゴシック体も良いですが、「A1ゴシック」も魅力的なフォントなので変えてみました。PV数が規定値を超えていなければ現在のページにも表示されているはず。TypeSquareは1書体しかお借りできないので、見出しや強調はGoogle FontsのZen Kaku Gothic NewですZEN角ゴシック優秀ですね…無料なのに。

ChromeとSafariでちょうどいい日本語フォントの指定を調整しました。環境によってはフォントを日本語で指定したほうがいいケースもあるかもしれませんが私はそこまで細かいことを気にしていないので日本語での指定を省きました。

body{
font-family: "A1 Gothic R","Zen Kaku Gothic New","Yu Gothic","Hiragino Sans",Meiryo,"MS PGothic",sans-serif;
}

前にあるほうが優先になります。TypeSquareの「A1ゴシックR」が非表示になった場合、次に優先的に表示されるのはGoogle Fontsの「ZEN角ゴシック」です。この際、ZEN角ゴシックでも良いかな〜と思うのですが、100%漢字が対応できているかわからないのでひとまず現状はこれで。(※私は游ゴシック体を諦めたわけではないのですよ!Appleさん!)
ヒラギノは標準なので指定しなくてもいい気がしますがAppleさんの公式サイトは「SF Pro JP」を指定していて次はヒラギノに何をするかわからないので念の為入れています。

もっと細かくいうとフォントの太さ(ウェイト)別でも指定があるのですが、その辺は好みだと思うので調べてください。

A1 Gothic RA1ゴシックRegularTypeSquare(PV数上限あり)
Zen Kaku Gothic NewZEN角ゴシックNewGoogle Fonts
Yu Gothic游ゴシック体現在Safari非対応
Hiragino Sansヒラギノ角ゴシックMac標準
MeiryoメイリオWindows用
MS PGothicMS P ゴシックWindows用
sans-serifその他、サンセリフ体を指定

※私のCSSの書き方が完璧な日本語フォントの表示を保証するものではないですが、「このページを参考にした!」という方がいらっしゃいましたらTwitter(@yuuki_kamikara)でお知らせいただけると嬉しいです!今後のモチベーションにもなりますので、よろしくお願いします♪

游ゴシックはしばしのお別れ・・・
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
INDEX(この記事の目次)
閉じる