Google Colaboratoryのフォントが文字化けします

Question

上のようにSafariだと綺麗に表示できるのに対し，Chromeで同じものを見ると文字化けをしていたり，全体的に崩れてしまっています．

普段はSafariを使わないので，Chromeでも同じように表示して欲しいのですが，どのようにすればいいでしょうか.

上の表示は下記のTexコードによるものです．
p(\mathbf{x}_T) = \mathcal{N}(0, I)

環境はMacOS VenturaでChrome(111.0.5563.64)です．

以下はランタイムログです．

Timestamp	Level	Message
Mar 16, 2023, 2:43:48 PM	INFO	Kernel started: 761d9cd7-3aaa-46d4-9660-3e33ac8afec5, name: python3
Mar 16, 2023, 2:42:26 PM	INFO	Use Control-C to stop this server and shut down all kernels (twice to skip confirmation).
Mar 16, 2023, 2:42:26 PM	INFO	http://172\.28\.0\.12:9000/
Mar 16, 2023, 2:42:26 PM	INFO	Jupyter Notebook 6.3.0 is running at:
Mar 16, 2023, 2:42:26 PM	INFO	Serving notebooks from local directory: /
Mar 16, 2023, 2:42:26 PM	WARNING	ModuleNotFoundError: No module named 'jupyter_server'
Mar 16, 2023, 2:42:26 PM	WARNING	from jupyter_server.base.handlers import JupyterHandler
Mar 16, 2023, 2:42:26 PM	WARNING	File "/usr/local/lib/python3.9/dist-packages/panel/io/jupyter_server_extension.py", line 53, in <module>
Mar 16, 2023, 2:42:26 PM	WARNING	File "<frozen importlib._bootstrap>", line 228, in _call_with_frames_removed
Mar 16, 2023, 2:42:26 PM	WARNING	File "<frozen importlib._bootstrap_external>", line 850, in exec_module
Mar 16, 2023, 2:42:26 PM	WARNING	File "<frozen importlib._bootstrap>", line 680, in _load_unlocked
Mar 16, 2023, 2:42:26 PM	WARNING	File "<frozen importlib._bootstrap>", line 986, in _find_and_load_unlocked
Mar 16, 2023, 2:42:26 PM	WARNING	File "<frozen importlib._bootstrap>", line 1007, in _find_and_load
Mar 16, 2023, 2:42:26 PM	WARNING	File "<frozen importlib._bootstrap>", line 1030, in _gcd_import
Mar 16, 2023, 2:42:26 PM	WARNING	return _bootstrap._gcd_import(name[level:], package, level)
Mar 16, 2023, 2:42:26 PM	WARNING	File "/usr/lib/python3.9/importlib/__init__.py", line 127, in import_module
Mar 16, 2023, 2:42:26 PM	WARNING	mod = importlib.import_module(modulename)
Mar 16, 2023, 2:42:26 PM	WARNING	File "/usr/local/lib/python3.9/dist-packages/notebook/notebookapp.py", line 2033, in init_server_extensions
Mar 16, 2023, 2:42:26 PM	WARNING	Traceback (most recent call last):
Mar 16, 2023, 2:42:26 PM	WARNING	Error loading server extension panel.io.jupyter_server_extension
Mar 16, 2023, 2:42:21 PM	INFO	Use Control-C to stop this server and shut down all kernels (twice to skip confirmation).
Mar 16, 2023, 2:42:21 PM	INFO	http://172\.28\.0\.2:9000/
Mar 16, 2023, 2:42:21 PM	INFO	Jupyter Notebook 6.3.0 is running at:
Mar 16, 2023, 2:42:21 PM	INFO	Serving notebooks from local directory: /
Mar 16, 2023, 2:42:21 PM	INFO	google.colab serverextension initialized.
Mar 16, 2023, 2:42:20 PM	INFO	Authentication of /metrics is OFF, since other authentication is disabled.
Mar 16, 2023, 2:42:20 PM	INFO	Writing notebook server cookie secret to /root/.local/share/jupyter/runtime/notebook_cookie_secret
Mar 16, 2023, 2:42:20 PM	WARNING	/root/.jupyter/jupyter_notebook_config.json
Mar 16, 2023, 2:42:20 PM	WARNING	/root/.local/etc/jupyter/jupyter_notebook_config.json
Mar 16, 2023, 2:42:20 PM	WARNING	/usr/etc/jupyter/jupyter_notebook_config.json
Mar 16, 2023, 2:42:20 PM	WARNING	/usr/local/etc/jupyter/jupyter_notebook_config.json
Mar 16, 2023, 2:42:20 PM	WARNING	/usr/local/etc/jupyter/jupyter_notebook_config.d/panel-client-jupyter.json
Mar 16, 2023, 2:42:20 PM	WARNING	/etc/jupyter/jupyter_notebook_config.json
Mar 16, 2023, 2:42:20 PM	INFO	google.colab serverextension initialized.
Mar 16, 2023, 2:42:20 PM	INFO	Authentication of /metrics is OFF, since other authentication is disabled.
Mar 16, 2023, 2:42:20 PM	INFO	Writing notebook server cookie secret to /root/.local/share/jupyter/runtime/notebook_cookie_secret
Mar 16, 2023, 2:42:20 PM	WARNING	/root/.jupyter/jupyter_notebook_config.json
Mar 16, 2023, 2:42:20 PM	WARNING	/root/.local/etc/jupyter/jupyter_notebook_config.json
Mar 16, 2023, 2:42:20 PM	WARNING	/usr/etc/jupyter/jupyter_notebook_config.json
Mar 16, 2023, 2:42:20 PM	WARNING	/usr/local/etc/jupyter/jupyter_notebook_config.json
Mar 16, 2023, 2:42:20 PM	WARNING	/usr/local/etc/jupyter/jupyter_notebook_config.d/panel-client-jupyter.json
Mar 16, 2023, 2:42:20 PM	WARNING	/etc/jupyter/jupyter_notebook_config.json

Comments

[can110]

TeXでの表示結果でしょうか。
コードを提示すると第三者が再現、検証し回答得られやすくなると思います。

[T0RA]

コメントありがとうございます．追記します．

[can110]

とりあえずWin11のChrome(111.0.5563.65)では問題なく表示されました。
- OSやブラウザバージョン
- できればランタイム→ランタイムログの表示にてログをMarkdown形式でコピー
についての情報も提示すると回答得られやすくなるかと思います。

[T0RA]

検証ありがとうございます．
MacOS VenturaでChrome(111.0.5563.64)です．

諸々追記します．

[can110]

ログには警告がいくつもありますが、こちらとほぼ同じ内容なので問題ないように思います。
あとはブラウザF12で開発者ツール→コンソールにエラーが出てないかでしょうか。

[T0RA]

DevTools failed to load source map: Could not load content for https://ssl.gstatic.com/colaboratory-static/min-maps/vs/loader.js.map: HTTP エラー: ステータス コード 404、net::ERR_HTTP_RESPONSE_CODE_FAILURE
というエラー（とさらに同様のDevTools failed to load source map）が出ていました．

[jbpb0]

質問のsafariの画像や、私の回答の画像では、「(」(カッコ)の線幅が上下に向かって細くなってますが、質問のchromeの画像ではそうなってません
他にも、「0」の上下の部分が細くなってるかとか、違いがあります
違うフォントが使われてるのではないですかね

当方のmacのchromeでgoogle colabを表示してる状態で、chromeの「検証」で「font-family: mathjax」を検索した結果は下記の通りでしたけど、質問者さんのmacのchromeではどうでしょうか？

.MJXp-scr {font-family: MathJax_Script,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-frak {font-family: MathJax_Fraktur,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-sf {font-family: MathJax_SansSerif,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-cal {font-family: MathJax_Caligraphic,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-mono {font-family: MathJax_Typewriter,'Times New Roman',Times,STIXGeneral,serif}

また、当方のmacのsafariでgoogle colabを表示してる状態で、safariの「要素の詳細を表示」で「font-family: mathjax」を検索した結果も上記と同じでしたけど、質問者さんのmacのsafariではどうでしょうか？

[T0RA]

私のChromeではこのようになっていました．
.MJXp-scr {font-family: MathJax_Script,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-frak {font-family: MathJax_Fraktur,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-sf {font-family: MathJax_SansSerif,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-cal {font-family: MathJax_Caligraphic,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-mono {font-family: MathJax_Typewriter,'Times New Roman',Times,STIXGeneral,serif}

Safariではこのようになっていました．
.MJXp-scr {font-family: MathJax_Script,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-frak {font-family: MathJax_Fraktur,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-sf {font-family: MathJax_SansSerif,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-cal {font-family: MathJax_Caligraphic,'Times New Roman',Times,STIXGeneral,serif}
.MJXp-mono {font-family: MathJax_Typewriter,'Times New Roman',Times,STIXGeneral,serif}

見落としがなければ同じのようです．

[jbpb0]

google colabからwebブラウザに来てるデータは同じですね
(当たり前か)

https://yumikax.hatenablog.jp/entry/2016/08/20/210429
とかを見たら分かりますが、「Times New Roman」は
・「(」(カッコ)の線幅が上下に向かって細くなってる
・「0」の上下の部分が細くなってる
というものです

質問のchromeの画像ではそうなってませんので、google colabからは「Times New Roman」を使えと指定されてるのに、違うフォントが使われてるのではないですかね
(理由は分かりませんが)

Answer 1

macOS Monterey 12.6.3
Chrome 111.0.5563.64

Answer 2

追加情報

近い情報があったので追記です。
LaTex not rendering correctly with macOS Ventura update #3192

all \mathcal are showing up as a squares.

ブラウザまたはOSのフォント関連の更新に起因するMathJax側の問題？
とくにSTIXNonUnicode-Italicというフォント周りに問題があるかも？という意見が出ているようです。

とりあえずWin11のChrome(111.0.5563.65)では問題なく表示されました。

また、以下は似た現象についての情報提供です。

Texによる数式表現37～MathJax, KaTeX表示トラブルの要因・解決

Chrome, 新しいEdge(Chromiumベース)では数式表示できないがSafariでは正しく表示できている。

プライバシーエラーの対処の続報

colabの動作については詳しくありませんが、もし仮にcolabがブラウザ側のjavascriptでTeX処理しているのであれば、ブラウザ、OSによりスクリプト配置先のサーバ証明書がエラー扱いされて正常にスクリプトが動作していないのかもしれません。

Comments

[T0RA]

ありがとうございます．
お教えいただいたページを参考に色々やってみます．

[T0RA]

追加情報ありがとうございます．
ブラウザとOSの複合的問題だと厄介ですね．
issueを見守って解決案が出るのを待とうかと思います．