Google Chrome のフォントが太くなった

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー ブラウザ

経緯

最近、ふと Vivaldi で表示した一部サイトのフォントが太くなっていることに気付きました。

  • タイミング: その日初めてPCを起動してブラウジングを行ったとき。
    • おそらく前日にアップデートが当たって、再起動した後に反映されたものと推測されます。
  • 現象を確認したサイト: WordPress の管理画面 (フロントはテーマに沿ったフォントになっていて変化なし) 、 Wikipedia、 Google の検索結果、 等の一部のサイト。
  • 現象を確認したブラウザ: Vivaldi (7.1.3570.60), Google Chrome (134.0.6998.37, 134.0.6998.89), Microsoft Edge (134.0.3124.51 / ※現象発生時何度かブラウザを再起動しても問題なかったが、後日改めて確認して左記のバージョンのときは Chrome と同様の現象が発生した) 。

しかも現象が発生しているPCとしていないPCがあることや、複数のサイトで現象が確認されたためブラウザ側の問題だと判断しました。かつ、後述の通り Firefox 等では発生していなかったので、これは Chrome 系のアップデートか何かのせいか、と思って調査と対処を行いました。

現象確認

まずは現象確認。

Chrome で Wikipedia の記事を表示
Chrome で Wikipedia の記事を表示

Chrome で Wikipedia の記事を表示しました。何というか、全体的に太字になったような印象で黒の密度が高いというか、文字の圧が強くて文章を読むのに疲れそうです……。

SRWare Iron で Wikipedia の記事を表示
SRWare Iron で Wikipedia の記事を表示

比較のために SRWare Iron で表示しました。……やはり太くなってますよね。厳密に言えば書体が変わっているので「同一フォントの太字になった」のではなく、「今までとは別の太めのフォントが適用されている」という方が正しいでしょうが……。

Firefox で Wikipedia の記事を表示
Firefox で Wikipedia の記事を表示

もう一つオマケに Firefox での表示。そうですよね、このくらいの太さですよね……。

対処

現象が確認できたところで、対処を実施。

原因はブラウザのデフォルトで使用されるフォントが変わったことだろうと推測できたので、ブラウザの設定画面で調整します。

Chrome での表示に使用するフォントの変更

Chrome での表示に使用するフォントの変更
Chrome での表示に使用するフォントの変更

Chrome では左のメニューの「🎨デザイン」を選択し、メイン設定画面下部の「フォントをカスタマイズ」に進みます。

Chrome での表示に使用するフォントの変更
Chrome での表示に使用するフォントの変更

「標準フォント」と「Sans Serif フォント」が「Noto Sans CJK JP」になっているので、これらを変更します。

今回は noto-cjk/Sans/OTF/Japanese at main · notofonts/noto-cjk · GitHub から NotoSansCJKjp-DemiLight.otf をダウンロードして PC にインストール、適用させます。

Chrome での表示に使用するフォントの変更
Chrome での表示に使用するフォントの変更

Windows PC にフォントをインストールした後に Chrome を起動するとセレクトボックスに「Noto Sans CJK JP DemiLight」が増えていたのでこれを選択。

Chrome での表示に使用するフォントの変更
Chrome での表示に使用するフォントの変更

2箇所変更しました。

Chrome で再度 Wikipedia の記事を表示
Chrome で再度 Wikipedia の記事を表示

設定を変更して再度 Wikipedia の記事を表示させたところ、文字の圧がだいぶ減って読みやすい状態になりました。

Vivaldi での表示に使用するフォントの変更

他の Chrome 系ブラウザでも設定を変更します。まずは Vivaldi 。

Vivaldi での表示に使用するフォントの変更
Vivaldi での表示に使用するフォントの変更

設定の左のメニューから「🌐ウェブページ」を選択、右のメイン画面の下部に「既定のフォント」の項目があるため、ここの「標準」と「ゴシック体」を Chrome と同様に「Noto Sans CJK JP」から「Noto Sans CJK JP DemiLight」へ変更します。

Edge での表示に使用するフォントの変更

続いて Edge 。

Edge での表示に使用するフォントの変更
Edge での表示に使用するフォントの変更

Chrome とほぼ同じですが、設定の左のメニューから「🎨外観」を選択、右のメイン画面の下部に「フォントのカスタマイズ」の項目があるため進みます。

Edge での表示に使用するフォントの変更
Edge での表示に使用するフォントの変更

「標準フォント」と「サンセリフ フォント」を Chrome と同様に「Noto Sans CJK JP」から「Noto Sans CJK JP DemiLight」へ変更します。

これで一通り設定変更完了し、ブラウジングしやすくなりました。

余談

ここまで対処をしたのは良いのですが、今回の現象は本来であれば 2024/8～2024/9 に発生していた事象と思われます (Chrome ver.128)。それが何故今頃発生したのかは不明……。毎日のように使用しているのでアップデートは当たっている状態なので「久々に起動して 127 より前のバージョンから一気に最新まで上がった」訳ではないです。

また、冒頭の通り今回の現象が発生しているPCと発生していないPCがあり、違いは諸々あるのですがWeb開発用の環境の有無が大きな違い、もっと言えば Noto Sans CJK がPCに入っているか入っていないかが発生する・しないの分水嶺だと思われます。

参考

現象報告

フォント

フォント

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧