2021年の仕事納めはAppleのスペシャリストさんと電話、でした。
今日、Macを新調したのですが、開封早々、デザイン案件に支障が出る事態となったためです。
新しいMacのSafariを開くと、あらゆるWEBサイトに使われている『游ゴシック体』が消滅していました。
パッと思いつくサイトはいくつか巡回したのですが、綺麗さっぱり消えています。例えば、私の好きなロックバンドのオフィシャルサイトとか、敬愛するGCPさん、ラボさん、パルミーさん、wordpressテーマ「SWELL」の公式でも游ゴシック体は反映されません。
それから、自分がデザインしたクライアントのサイトやLPも游ゴシック体を使ったサイトは全滅でした。（全滅というと大袈裟ですが、ヒラギノに置き換わっているだけなので文字が読めないわけではない──けど困った💦）
『Monterey Safari フォント』などで検索をしても同じ症状の報告が見つけられませんでした。最近はスマホでアクセスする人の方が多いのと、いろいろなフォントメーカーからWEBフォントがたくさん日本語対応になったので、多くの人が気にしていないのかもしれません。今日ずっと探してて、それっぽい症状の情報があったのはTwitterで2件でした。
あと意外な発見ですが、ロゴやサムネ画像は游ゴシックで作っているけど、サイトの本文はデフォルト（ヒラギノなど）のまま、っていうブランドサイトも結構あって『ロゴの游ゴシック感がそれだけ強い！』って思い知らされました。
──さっそく新旧2つのMacで検証しました。それからChromeとも比較してみました。
| 旧MacBook Pro 2018モデル | 新MacBook Pro 2021モデル | |
|---|---|---|
| macOS | 11.6.1（Big Sur） | 12.1（Monterey） |
| CPU | Intel Core i7 | Apple M1 Pro |
| Safariバージョン | 15.1 | 15.2 |
| Chromeバージョン | 96.0.4664.110 | 96.0.4664.110 |
Apple公式のトラブルシューティングやOSの再インストールもしたのですが、結果は変わらず。
最後に、スペシャリストさんと電話で解決方法を探すことになりました。
今日の時点での結論は、このMac個体に起きた問題ではなく、OSに由来するものであろうと推測まではできましたが、さらに深掘りするためには年末年始を越してからになります。クライアントにもし質問されたら、大きなトラブルではないことをお伝えするしか、今できることはなさそうです。当面はChromeで動作確認をしましょう。
ちなみに、游ゴシック体の公式サイト（字游工房やモリサワ）は問題なく表示されています。公式サイトの表面的なコードを見てもすぐに違和感を見つけることはできなかったので、（→TypeSquareさんかなと思います。TypeSquareについては次の段落をご参照ください。）
引き続きAppleさんの回答を待ちます。
続報はこちらのページでお伝えします。
↓
TypeSquareでWEBフォントを指定
2022年2月18日現在、まだOSアップデートでなおりそうもないので、一時的な解決策を置いておきます。PV数がさほど多くなければ費用はかけずにできることなので、游ゴシック体が恋しいみなさまご検討ください。
Webフォントサービス「TypeSquare」さんで1書体だけお借りしました。
手順はシンプル。会員登録をして専用タグをコピペするだけです。ただし見出しは別の書体にしています。
この方法でフォントを指定すると、スマホでも指定のWEBフォントが見えるんじゃないかと思います。手持ちのiPhoneでしか確認していませんが、これはこれで嬉しい誤算でした！！
2022年6月現在：日本語のWEBフォントCSS指定方法
游ゴシック体も良いですが、「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 R | A1ゴシックRegular | TypeSquare（PV数上限あり） |
| Zen Kaku Gothic New | ZEN角ゴシックNew | Google Fonts |
| Yu Gothic | 游ゴシック体 | 現在Safari非対応 |
| Hiragino Sans | ヒラギノ角ゴシック | Mac標準 |
| Meiryo | メイリオ | Windows用 |
| MS PGothic | MS P ゴシック | Windows用 |
| sans-serif | その他、サンセリフ体を指定 |
※私のCSSの書き方が完璧な日本語フォントの表示を保証するものではないですが、「このページを参考にした！」という方がいらっしゃいましたらTwitter（@yuuki_kamikara）でお知らせいただけると嬉しいです！今後のモチベーションにもなりますので、よろしくお願いします♪
