Customizing Chrome OS Terminal (Crostini) to enable Nerd Fonts

nerdfonts-chromeos.md

If you're like me, you want to use Nerd Fonts for your editor and the terminal. If you use a terminal based editor like neovim or emacs, then you need that configued on your terminal emulator. But if you're using Chrome OS, which is more locked down than other desktop OS, then the usually simple task of installing these font and using them isn't as straightforward.

I have used the workaround to achieve this task. There is no guarantee it will continue to work in futuere versions. It depends on whether the old terminal settings page isn't removed from the app bundle and if the app doesn't stop loading the old config. As of Chrome OS 113, it is still working.

1. Open the old terminal settings page, as it allows more customizations:

   chrome-untrusted://terminal/html/nassh_preferences_editor.html

2. Once there, add the following custom CSS on the field labeled "Custom CSS (inline text)":

   @font-face {  
     font-family: "Fira Code Nerd";  
       src: url("https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/patched-fonts/FiraCode/Regular/FiraCodeNerdFont-Regular.ttf");  
     font-weight: normal;  
     font-style: normal;  
   }
   
   * {  
     -webkit-font-feature-settings: "liga" on, "calt" on;  
     -webkit-font-smoothing: antialiased;  
     text-rendering: optimizeLegibility; 
   } 

   The above defines a downloadable font face from the nerd fonts repo and give it the name "Fira Code Nerd". This is the nerd font patched version of Fira Code. That font has some useful and cool looking ligatures, so naturally we enabled that after the font face definition. If you do not want ligatures, you can just leave that part out.

3. Now configure the following as your font face in the field labeled "Text font family" to:

   "Fira Code Nerd", "Roboto Mono", monospace

   The above uses the Fira Code Nerd font face we defined in the CSS and it falls back to "Roboto Mono" in case the font can't be downloaded. Note that the ligatures and other fancy features will not work with Roboto Mono, but it at least gives you a decent looking option.

4. If you did everything correctly the terminal preview on that page should update to use the font face you defined. Restart the terminal app and it should be using ligatures, and all the fancy features. I found a useful script to allow you to test if the patched characters are being displayed correctly:

   https://github.com/ryanoasis/nerd-fonts/blob/master/bin/scripts/test-fonts.sh