Make Nerd fonts work with the Chromebook terminal

nerd.js

term_.prefs_.set('font-family', 'JetBrains Mono Nerd Font, monospace');
term_.prefs_.set('user-css-text', 
                 `@font-face {
                     font-family: "JetBrains Mono Nerd Font"; 
                     src: url("http://localhost:8000/JetBrainsMonoNerdFont-Regular.ttf"); 
                     font-weight: normal; 
                     font-style: normal;
                  }
                  x-row {
                      text-rendering: optimizeLegibility;
                      font-variant-ligatures: normal;
                  }`)

Nerd.md

Make Nerd fonts work with the Chromebook terminal

Here is a too complicated hack to make Nerd fonts work on the Chromebook terminal. There should be an easier way. Please tell me if you find it.

First we need a CORS compliant web server to fetch the font. I didn't want to have to be online to use the terminal so I'm going to run the server locally. Fetch the server.py file (below) and save it to your linux environment. I put it in ~/hacks/nerdfont/server.py. This little script adds the CORS headers to the python3 http server. It will only serve files from the current folder.

In my ~/.bashrc I added these lines:

# make the nerdfont available to the chromebook terminal
(cd ~/hacks/nerdfont; nohup python3 server.py > /dev/null 2> /dev/null & )

They run the little server in my hacks/nerdfont folder. No worries that this line gets invoked for every instance, the port serves as a singleton so that only one copy can run at a time.

I copied JetBrainsMonoNerdFont-Regular.ttf into the ~/hacks/nerdfont folder so the web server could find it.

Now that we have a source for the font we need to get into the inspector in the terminal. That used to be easier but now requires a trick. Go to chrome://inspect#other. Then search for terminal.html. You do not want the one with #home on the end of the url. You want the other one. Click the inspect link below it and you'll be in the inspector.

I went to the sources page and created a snippet. These are synced across browsers so you don't have to remember this arcane stuff. Paste the content of the file nerd.js (below) into the snippet. Save it. Or you can paste that code directly into the console.

Now run it with Ctrl-Enter.

Your terminal should now have a Nerd font.

The first terminal you get when you first start the linux container will not get the font because the server isn't running yet. I simply open a new tab and close the first one to fix that. I usally leave the container running so this doesn't happen very often.

I got started down this road here.

server.py

#!/usr/bin/env python3

# It's python3 -m http.server PORT for a CORS world
# https://gist.github.com/pirafrank/4089fd5532b4fdafac2bc3d476dd096e

from http.server import HTTPServer, SimpleHTTPRequestHandler
import sys


class CORSRequestHandler(SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header("Access-Control-Allow-Origin", "*")
        self.send_header("Access-Control-Allow-Methods", "*")
        self.send_header("Access-Control-Allow-Headers", "*")
        self.send_header("Cache-Control", "no-store, no-cache, must-revalidate")
        return super(CORSRequestHandler, self).end_headers()

    def do_OPTIONS(self):
        self.send_response(200)
        self.end_headers()


host = sys.argv[1] if len(sys.argv) > 2 else "0.0.0.0"
port = int(sys.argv[len(sys.argv) - 1]) if len(sys.argv) > 1 else 8000

print("Listening on {}:{}".format(host, port))
httpd = HTTPServer((host, port), CORSRequestHandler)
httpd.serve_forever()