Custom font for code cells and result inspectors

[wizzard0]

Is your feature request related to a problem? Please describe. I work with numbers having lots of significant decimal digits. There's an awesome font hack making them more readable called Numderline which underlines every other group of three digits with ligatures. I use Numderline fonts in IDE, terminal, etc.

Fonts on most websites can be styled with Stylebot or changed via browser settings, however Observable has a tricky DOM which I've been unable to style with Stylebot so far.

Describe the solution you'd like Ability to set a custom font for code and execution results.

Describe alternatives you've considered Stylebot; changing default monospace browser font - neither seems to work with Observable

Additional context

[CobusT]

Not sure if this helps, but here is an example of applying a truetype font to a table in Observable

https://observablehq.com/@cobus/truetype-font

[mootari]

For the editors you can create a user style with the following content:

@-moz-document domain("observablehq.com") {
  :root { --monospace: Numderline }
}

The notebook contents reside in an iframe, which (as far as I'm aware) cannot be modified by extensions. To change the monospace font there, you'll have to insert the following line into a Markdown or HTML cell:

<style>:root { --monospace: Numderline }</style>

If you also want to change the font size and/or line spacing, use --monospace-font instead. This variable represents the font shorthand property, so you'll have to provide e.g. 14px/1.2 Numderline.

[hellonearthis]

There are font-variant-numeric settings that might work.

font-variant-numeric: tabular-nums;

https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric

[wizzard0]

@mootari: thanks, works great!

@hellonearthis: tabular-nums is nice, but thankfully the font is already monospace)