Can JupyterLab access/use user installed fonts?

Hey!

I just installed jupyter lab to try to learn a little bit more about it. As far as I can tell, it’s really cool.

However, I can’t make it use one custom font I have that I use with my terminal, which is related to powerlevel9k.

I’m trying to use a nerd font, but I’m not able to load in. Any idea?

I’m of course using zsh.

Thanks!

Good news: all the DOM-based stuff in lab definitely can use system fonts… it’s enough to do some CSS variables and you can even play with it dynamically.

%%html
<style>
:root {
  --jp-code-font-family: "Comic Sans";
}
</style>

Bad news: Terminal (powered by xterm) actually uses canvas, and the style has to be set explicitly when it’s created. A lot of the theme stuff is picked up, but unfortunately not the font. xterm.js supports fallback fonts… for example, this is the current setup for notebook/editor code:

:root {
  --jp-code-font-family-default: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

It’s going to pick DejaVufor me for my Notebook code on Linux, but Terminal is going to get stuck with whatever monospace maps to on the system.

From your perspective, would you want:

  1. [ ] always the same font for code (e.g. notebooks, editor) and terminal

  2. [ ] default the terminal font to the code font, but be separately overrideable

  3. [ ] default the terminal to something not affected by the theme

  4. [ ] completely unrelated fonts (except that they may have the same default value)

I’m kind of imagining is:

:root {
  --jp-code-font-family-default: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --jp-code-font-family: var(--jp-code-font-family-default);
  --jp-terminal-font-family: var(--jp-code-font-family-default)  /* <-- new */
}

At any rate, I recommend creating an issue on Lab! This would definitely need a PR in order to get changed, and I have some familiarity with the code… but I’m a bit swamped with the prospect of updating a bunch of extensions to Lab 1.0…

Hey!

Thanks for the answer I definitely want to explicitly set the font of the terminal, and it would be nice to be able to set the same or not for the interface and for the notebooks.

Interface, notebooks and terminal should be three different options. I’ll create an issue on Lab.

Thanks!

by the way… we just discovered that in safari doesn’t work, but it does in other browsers.

It appears that the font for the terminal is set in

 .terminal {
    width: 100%;
    float: left;
    font-family: monospace;
    color: white;
    background: black;
    padding: @code_padding;
    border-radius: @border-radius-base;
    .box-shadow(@global-shadow-dark);
    line-height: 1em;
    font-size: @notebook_font_size;

    .xterm-rows {
      padding: 10px;
    }
  }

Can one simply, in this file, make a change like

    font-family: 'DejaVu Sans Mono';

Separately, on an installed Jupyter notebook, where is this find located?

Not sure if you’re still tracking this issue, but looks like you can now change terminal font family in Settings -> Advanced Settings Editor -> Terminal -> fontFamily.

I hope this works in your case.

Hello, where do I put this code? I saw some people on stackoverflow talk about a custom.css file but there is no such file in either .jupyter or .ipython
I looked at the ipynb file and there is no mention of fonts there as well.

Most kernel languages offer a way to create rich output. For example, with IPython, one has two options:

from IPython.display import HTML

display(HTML("""
<style>
:root {
  --jp-code-font-family-default: 'Comic Sans';
}
</style>
"""))

or, the “magic”:

%%html
<style>
:root {
  --jp-code-font-family-default: 'Comic Sans';
}
</style>

In the JupyterLab UI (multi-document), these styles will also impact other notebooks that are open.

In Jupyter Notebook (single document), these styles will only impact these notebooks.

Finally, the latest JupyterLab (and Notebook, and Lite) has support for setting more of these for the user’s machine only, via settings:

1 Like