SBAPP

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

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

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

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

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テク倉庫

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が適用されます。
    CSSが正しく作成されており、読み込みに成功していると、候補にCSSが表示されます。
  • 手順4のCSSは用途にあわせて編集してください。Google検索以外のフォントも変更したい場合は、メタ情報にウェブサイトのURLを「@include https://ドメイン/*」のように追記してください。
  • フォントを変更したくない場合は、font-family:Arial,"ヒラギノ角ゴ Pro W3","HiraKaKuPro-W3","Hiragino Sans",sans-serif;の代わりに、font-weight:300;などを指定してください。
  • Userscriptsの詳細な使い方やメタデータの書き方はGitHubを参考にしてください。

著者情報

Ryo
こんにちは、「SBAPP」を運営しているRyoです。

Apple製品はiPhone 3GSから使い始め、国内でスマートフォンが急速に普及し始めた時期、iPhone 5が展開された頃から、主にiPhoneやiOSなどの使い方や不具合情報を10年以上にわたり発信しています。

現在はiPhoneやiOSの情報だけでは無く、SNSプラットフォームでの障害や不具合、フィッシング詐欺メール・SMSに関する注意喚起など、広範なテーマにわたる記事を書いています。

過去には「電気の見える化」に関するウェブアプリケーション開発、大規模システムの保守業務に従事していたことがあり、それらの経験を活かしてSBAPPを含むブログメディア等を運営しています。記事が少しでもお役に立てたら幸いです。

コメントを投稿する(承認後に反映されます)

*

Return Top