最近では、仕事でもプライベートでも一日の大半を <a href="https://chat.openai.com/" target="_blank" rel="nofollow noopener noreferrer">ChatGPT</a> とにらめっこしています。そこでふと感じたことが。
ChatGPT のデフォルトフォント読みづらくね？
…こんな感じになりました。
<img src="https://storage.googleapis.com/zenn-user-upload/a69aff97767a-20231219.png" loading="lazy" class="md-img">
<h2 id="chatgpt-%E3%81%AE%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88">
<a class="header-anchor-link" href="#chatgpt-%E3%81%AE%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" aria-hidden="true"></a> ChatGPT のデフォルトフォント</h2>
Web 版 ChatGPT では html 要素に対して以下のようなCSSが当たっています。
<div class="code-block-container"><pre class="language-css"><code class="language-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;
}
</code></pre></div><a href="https://klim.co.nz/collections/soehne/" target="_blank" rel="nofollow noopener noreferrer">Söhne</a> というのは、OpenAI のサービス全般で使用されている Web フォントですが、当然ラテン文字しか含まれていないので、日本語環境ではその次の<code>ui-sans-serif</code>が当たっています。なぜ…。
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/font-family" target="_blank" rel="nofollow noopener noreferrer">MDN</a> を見ると、<code>ui-sans-serif</code>は「ユーザーインターフェイス既定のセリフなしフォントです。」と定義されています。
これは Windows のシステム設定で指定したフォントで、Chrome からは操作できません。そして Windows10 および 11 のシステムフォントは Yu Gothic UI です。
Windows のシステム設定を変更してもよいのですがあんまりよくないので、今回は <a href="https://chromewebstore.google.com/detail/ifhikkcafabcgolfjegfcgloomalapol" target="_blank" rel="nofollow noopener noreferrer">Live editor for CSS, Less &amp; Sass - Magic CSS</a> を使用してみました。
<h2 id="chrome%E3%81%AE%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%A7%E3%82%B5%E3%82%AF%E3%81%A3%E3%81%A8css%E3%82%92%E4%B8%8A%E6%9B%B8%E3%81%8D">
<a class="header-anchor-link" href="#chrome%E3%81%AE%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%A7%E3%82%B5%E3%82%AF%E3%81%A3%E3%81%A8css%E3%82%92%E4%B8%8A%E6%9B%B8%E3%81%8D" aria-hidden="true"></a> Chromeの拡張機能でサクっとCSSを上書き</h2>
Noto Sans JP がまだ未インストールの場合は <a href="https://fonts.google.com/noto/specimen/Noto+Sans+JP" target="_blank" rel="nofollow noopener noreferrer">Google Fonts からサクっとダウンロード</a>しておいてください。
いつものように Chrome で <a href="https://chat.openai.com/" target="_blank" rel="nofollow noopener noreferrer">chat.openai.com</a> を開き、拡張機能ボタンから Live editor for CSS, Less &amp; Sass - Magic CSS を開きます。 
<img src="https://storage.googleapis.com/zenn-user-upload/58f5231a0b27-20231219.png" loading="lazy" class="md-img">
<div class="code-block-container"><pre class="language-css"><code class="language-css">html {
 font-family: "Noto Sans JP", sans-serif;
 font-feature-settings: "palt";
 word-break: auto-phrase;
}
</code></pre></div>ざっくり解説
<ul>
<li>
font-family: "Noto Sans JP", sans-serif; 
フォント名を指定します。お好みに応じて変更してください。<s>Söhne くんには特に思い入れもないため消えてもらいました</s>。</li>
<li>
font-feature-settings: "palt"; 
自動でカーニングしてくれるすごいやつ。ただ、詰まりすぎてしまうため、お好みで <code>letter-spacing</code> してください。</li>
<li>
word-break: auto-phrase; 
最近のChromeで使えるようになった、機械学習を利用して読みやすい場所で自動で改行してくれるすごいやつ。おそらく BudouX を利用してローカルで処理している（謎技術）。こちらもお好みで使ってください。</li>
</ul>
ほかにも <code>font-size</code> や <code>font-weight</code> 、 <code>line-height</code> あたりを調整してもよさそう。
完了したら上部のピンアイコンをクリックすることで、次回から自動適用することができます。
<img src="https://storage.googleapis.com/zenn-user-upload/9b7d42475956-20231219.png" loading="lazy" class="md-img">
キミだけの ChatGPT をカスタムして楽しもう👊

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

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

Discussion