HTML table with default Observables font?

Community Help
1

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?

2

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,
    sans-serif;
  --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.

3 Likes
3

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