デフォルトフォントを変更して ChatGPT を快適に利用する

最近では、仕事でもプライベートでも一日の大半を ChatGPT とにらめっこしています。そこでふと感じたことが。

ChatGPT のデフォルトフォント読みづらくね？

…こんな感じになりました。

ChatGPT のデフォルトフォント

Web 版 ChatGPT では html 要素に対して以下のようなCSSが当たっています。

html {
  text-size-adjust: 100%;
  font-feature-settings: normal;
  font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-variation-settings: normal;
  line-height: 1.5;
  tab-size: 4;
}

Söhne というのは、OpenAI のサービス全般で使用されている Web フォントですが、当然ラテン文字しか含まれていないので、日本語環境ではその次のui-sans-serifが当たっています。なぜ…。

MDN を見ると、ui-sans-serifは「ユーザーインターフェイス既定のセリフなしフォントです。」と定義されています。

これは Windows のシステム設定で指定したフォントで、Chrome からは操作できません。そして Windows10 および 11 のシステムフォントは Yu Gothic UI です。

Windows のシステム設定を変更してもよいのですがあんまりよくないので、今回は Live editor for CSS, Less & Sass - Magic CSS を使用してみました。

Chromeの拡張機能でサクっとCSSを上書き

Noto Sans JP がまだ未インストールの場合は Google Fonts からサクっとダウンロードしておいてください。

いつものように Chrome で chat.openai.com を開き、拡張機能ボタンから Live editor for CSS, Less & Sass - Magic CSS を開きます。

html {
    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt";
    word-break: auto-phrase;
}

ざっくり解説

• font-family: "Noto Sans JP", sans-serif;
  フォント名を指定します。お好みに応じて変更してください。Söhne くんには特に思い入れもないため消えてもらいました。
• font-feature-settings: "palt";
  自動でカーニングしてくれるすごいやつ。ただ、詰まりすぎてしまうため、お好みで letter-spacing してください。
• word-break: auto-phrase;
  最近のChromeで使えるようになった、機械学習を利用して読みやすい場所で自動で改行してくれるすごいやつ。おそらく BudouX を利用してローカルで処理している（謎技術）。こちらもお好みで使ってください。

ほかにも font-size や font-weight 、 line-height あたりを調整してもよさそう。

完了したら上部のピンアイコンをクリックすることで、次回から自動適用することができます。

キミだけの ChatGPT をカスタムして楽しもう👊