Use different fonts for body text and code blocks

After some research i know that font can be changed by adding:

customStyles: "[[STYLES]]" 


#sb-root {
   --editor-font: "monospace" !important;

I want to know if it is possible to use different fonts in body text and code blocks. Like sans-serif for body text and monospace for codes.

I’m not familiar with css. Any kind of suggestions will be appreciated.

You could use:

.sb-line-fenced-code {
  font-family: "monospace" !important;

This would apply the font only to code blocks and you could still set the --editor-font in #sb-root for the rest of the editor (there is also --ui-font for text outside the editor)

However I am not sure how reliable it is that the selector .sb-line-fenced-code will continue to work in the future.

As an example:

The JetBrains Mono will only work if the font is installed or when #831 is released which includes the font.

1 Like

I’m doing this as well – I like to make the fenced code blocks a bit smaller though, for consistency:

html {
  --editor-width: 1200px; /* main content -- default is 800px */
  --editor-font: Open Sans /* variable pitch for regular content */

/* monospace for fenced code blocks */
.sb-line-fenced-code {
  font-family: 'iA-Mono';
  font-size: 10pt;