【iPhone】iOS17でSafariのフォントを元に戻す・太くなった文字を細くする方法について

iOS17以降、SafariなどのブラウザでGoogle検索やウェブサイトを表示すると、iOS16以前よりも文字が太くなることがあります。ユーザーからは、「iOS17でSafariのフォントが太くなった」「iOS17でフォントは元に戻せないの？」といった声が増えています。

iOS17でSafariの文字が太い、フォントが変わった

iOS17アップデート後、SafariなどでGoogle検索やウェブサイトを表示すると、アップデート以前よりも文字が太く表示されることがあり、iOS17アップデート直後はフォントの変化に強い違和感を感じることがあります。

iOS17にしたらSafariのフォントが太くなってて気持ち悪い。
戻せないのかよぉ…気持ち悪いんだよぉ…

— 透子 (@v6RKW4sliXRDjZW) November 28, 2023

iOS17のフォント問題って解決出来ないのか

— ヒキトユキ (@yukhik_lol_MT) November 28, 2023

iOS17でSafariなどのフォントは変更できないの？について

iOS17では、システムフォント「Hiragino Sans」や「sens-serif」の太さ（font-weight）が調整されており、iOS17以降のSafariなどでは、一部のウェブサイトで文字が太く表示されることがあります。

そのため、この問題を解決するには、ウェブサイト側がCSSでフォント「Hiragino Sans」や「sens-serif」の優先度を下げるか、iOS17向けにfont-weightを指定する必要があり、ユーザーが設定アプリから手軽にフォントを変更・戻すことはできません。

iOS 16までは、そのfont-weight調整が font-weight 500 以降に於いて行われていたようですが、この度のiOS 17からは font-weight 400まで降りてきたようで、ここが大騒ぎになっている一番の要因になっている様子です。 要はHiragino Sans利用者（テンプレート作者さんやフォントが解るヘビーユーザー）が一番設定するfont-weightだからです。

引用：Webテク倉庫

たぶんみんな気になってるのコレだよね。iOS17からsan-serifのフォントにウェイトが追加されて、400(またはnormal)か500を指定してるサイトで以前より太くなってる。以前と同じがいいなら300を指定すれば良さそう。ちなみに800以上も太い。 pic.twitter.com/CM27EZJ087

— なくうかん (@nacookan) September 19, 2023

UserscriptsでSafariの文字のフォント、太さを変更する方法

前述したように、設定アプリなどから手軽にフォントの変更はできませんが、Safariの拡張機能アプリ「Userscripts」を使用し、ブラウザ側でCSSを書き換える方法であれば、フォントの変更や文字を細くすることができます。

ただし、CSSやメタデータの記述が必要になるため、場合によっては難しく感じるかもしれません。また、Userscriptsに『Webページの読み取りと変更』を許可する必要があるため、セキュリティ面で不安を感じる場合が使用しないでください。

UserscriptsでSafariのフォントを変更する手順

1. App Storeで「Userscripts」をダウンロードする
2. iCloud Drive（ファイルアプリ）に適当なフォルダを作成する
3. 作成したフォルダに、メタデータやfont-familyやfont-weightを記述したCSS（○○○.css）を作成する

4. /* ==UserStyle==
   @name        Change the font
   @description Lower the priority of the font "Hiragino Sans" and "sans-serif". 
   @include    https://www.google.co.jp/*
   @include    https://www.google.com/*
   ==/UserStyle== */
   
   body {
   	font-family:Arial,"ヒラギノ角ゴ Pro W3","HiraKaKuPro-W3","Hiragino Sans",sans-serif;
   	/* font-weight:300; */
   }
   

5. Userscriptsを起動してSet Userscripts Directoryをタップ
6. 手順2で作成したフォルダを開き、右上の開くをタップ
7. iPhoneの設定→Safari→拡張機能→Userscriptsをタップ
8. Userscriptsを使用するタブグループのスイッチをオンにする
9. SafariでGoogle検索を開き、適当なワードで検索を実行する
10. 検索結果画面で、Safariの検索バー横にあるぁあをタップ
11. メニューからUserscriptsをタップ
12. 「"Userscripts"が○○○へのアクセスを求めています。」と表示されるので、1日だけ許可もしくは常に許可をタップ
13. 「"Userscripts "を○○に許可してもよろしいですか？」と表示されるので、このWebサイトで常に許可もしくはすべてのWebサイトで常に許可をタップ
14. Safari上にUserscriptsのシートが表示されるので、完了をタップしてシートを閉じ、ページを更新すると自作のCSSが適用されます。
    

    

• 手順4のCSSは用途にあわせて編集してください。Google検索以外のフォントも変更したい場合は、メタ情報にウェブサイトのURLを「@include https://ドメイン/*」のように追記してください。
• フォントを変更したくない場合は、

  font-family:Arial,"ヒラギノ角ゴ Pro W3","HiraKaKuPro-W3","Hiragino Sans",sans-serif;

  の代わりに、

  font-weight:300;

  などを指定してください。

• Userscriptsの詳細な使い方やメタデータの書き方はGitHubを参考にしてください。