HTML table with default Observables font?

I’d like to use html tables to format a notebook, but the default html font is different than what is used by default in the notebook. Is there any way to fix this?

The default CSS sets three variables for three groups of font families:

:root {
  --serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond",
    "Palatino Linotype", "Times New Roman", "Droid Serif", Times, serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --sans-serif: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
    helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial,
  --monospace: Menlo, Consolas, monospace;

You can use those variables in your own code. So, for example, you can write font-family: var(--serif) in the style attribute of any HTML and get Source Serif Pro (or one of its fallbacks).

By default, serif is used for headings and paragraphs; sans-serif is used for tables and inputs; monospace is used for code blocks. For example:

html {
  font: 17px/1.5 var(--serif);

table {
  font: 13px/1.2 var(--sans-serif);

pre {
  font: 14px/1.5 var(--monospace);

Here’s an example where I have a table using the default paragraph font:

I’m not sure I’ve understood exactly what you’re trying to do, so if you have an example notebook where something’s not working, post a link and I can take a look.


This is exactly what I needed, thank you so much! (^u^)