Chromebook

Linux(Debian) 上で動作するVS CodeのUIフォント変更

Linux(Debian) にVS Codeをインストールしたものの、UIフォントがいまいちで気分があがらない…
この記事では、Linux(Debian) 上で動作しているVS CodeのUIフォントを変更する手順をご紹介します。

この記事を読んで欲しい方

  • Linux(Debian) 上で動作するVS CodeのUIフォントを変更したい方

前提条件

変更前 変更後
VS Code UIフォント変更前 VS Code UIフォント変更後

参考情報

大まかな流れ

  1. VS Codeが依存しているGUIツール（GTK）のデフォルトフォント設定
  2. VS Code再起動

詳細

以降の手順は、2024年8月時点のものです。

VS CodeのUIが依存しているGUIツール（GTK）のデフォルトフォント設定

GTKの設定ファイルにデフォルトフォント設定を追加します。
（設定値の詳細は参考情報を参照）

1
2
3
4
5

$ mkdir $XDG_CONFIG_HOME/gtk-3.0
$ cat << EOF > $XDG_CONFIG_HOME/gtk-3.0/settings.ini
[Settings]
gtk-font-name = Noto Sans CJK JP 10
EOF

VS Code再起動

VS CodeのUIフォントが変更されたことを確認します。

補足：VS CodeのUIフォント設定確認方法

VS CodeのUIフォント設定内容の確認方法です。
Linux系OSではsystem-uiが採用されていることを確認できます。

  1. VS Code起動
  2. 開発者ツール（developer tools）を起動
    • コマンドパレットの場合
      • 日本語：開発者：開発者ツールの切り替え
      • 英語：Developer: Toggle Developer Tools
    • GUI操作の場合
      1. メニューバーからヘルプを選択
      2. 開発者ツールの切り替えを選択
  3. Elementsを選択
  4. <body〜>を選択
  5. Stylesを選択
  6. .linux:lang(ja)に記載されているfont-familyを確認

VS Code UIフォント確認

補足：VS CodeがGUIツール（GTK）に依存していることを確認する方法

以下のコマンドを実行することで、VS CodeがGTKに依存していることを確認できます。

1
2
3
4
5

$ apt-cache depends code | grep gtk
  Depends: libgtk-3-0
 |Depends: libgtk-3-0
  Depends: libgtk-4-1
$

本記事ではGTK3.0のフォント設定をご紹介しています。
GTK4.1のフォント設定方法も試してみましたが、VS Codeに反映されませんでした。
VS Codeの実装がGTK3.0に依存していると推測していますが、仕様レベルで確認できていません…
確認方法のわかる方がいれば教えていただきたいです。

まとめ

本記事ではVS CodeのUIフォントを変更する方法をご紹介しました。
以下の条件を満たすソフトウェアであれば応用の効く方法となりますので、ご活用ください。

  • フォント設定がsystem-uiとなっていること
  • ソフトウェアのGUIツールがGTKに依存していること