simple-web-system technology

Webに関する技術をシンプルに扱うブログ

ChromebookのTerminalでfontを自由に変える方法(おまけにテーマも変える)

Chrome OS 84からTerminalの設定画面が大幅に変わりました。(テーマ機能とか結構いいです) 見やすくなったのはいいんですが、フォントがデフォルトのものしか選べなくなっています。 vim-deviconsなどでアイコンを使いたいときに困ってしまいます

解決方法

実は、ブラウザから開くCrosh ShellとCrostiniのTerminalは共通の設定を使っています。 また、Crosh Shellの設定画面からCSSを自由に入力できます。 このCSS入力画面にWeb Fontの設定を入力すると、フォントを自由に変えられます。

手順

  1. Ctrl + Alt + TでCrosh Shellを開く
  2. Ctrl + Shift + pで設定画面を開く
  3. Web Font用の設定をコピー。(CSSを入力した瞬間に反映される)

自分はNerd Hackを愛用しているので以下のCSSを使っています。 URLの部分を好きなWEBフォントに入れ替えれば基本動きます。

@font-face {
    font-family: "Hack Nerd";
    src: url("https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/patched-fonts/Hack/Regular/complete/Hack%20Regular%20Nerd%20Font%20Complete.ttf");
    font-weight: normal;
    font-style: normal;
}

* {
    -webkit-font-feature-settings: "liga" on, "calt" on;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: 'Hack Nerd';
}```

Fira Codeの設定であれば以下の公式Wikiが役立ちます。
[https://github.com/tonsky/FiraCode/wiki/ChromeOS-Terminal:embed:cite]

## 補足
CrostiniのTerminalからフォントを変えても、CSSの設定が優先されるようです。

## おまけ
下記のリポジトリはCrosh用のテーマ集です。これを使うとTerminalのテーマも変更できます。
元に戻すときは、CrostiniのTerminalのテーマを`Dark`にすると元に戻ります。

[https://github.com/philj56/base16-crosh:embed:cite]