How to change editor and ui fonts

Tricks & Techniques
1

  • Upload by command or drag-and-drop the font you want to use on any SB page

  • Copy the link address of the font from that page

  • paste the following in any page, changing the font name to the one you want to use and the address to the one you copied:

@font-face {
  font-family: 'iA Writer Quattro V';
  src: 
url('http://127.0.1.1:3000/iAWriterQuattroV.ttf');
}

#sb-root {
       --editor-font: "iA Writer Quattro V" !important;
       --ui-font: "iA Writer Quattro V" !important;
}
  • the address I use here only works for my home pc, so if you want the fonts to work on other devices, use one that is accessible outside your home network. I use the one I get through Tailscale, for example.
3 Likes
2

FYI, you can probably do url('/iAWriterQuattroV.ttf') which would pick up the host from the current page.

2 Likes
3

Can you post a screenshot of Quattro V? I’d be interested. Is it mono space, does it work well e.g. with multi line list items (indentation and such)?

4

I believe it is not mono space and I remember when I had posted a screenshot of SB using it that you had noticed how indentation was misaligned.

It looks good on mobile devices though, fits more text on screen and is easier to read.

Here is a link with more info:

1000091189
1000091189768×788 258 KB

and here is a screenshot from SB:

20240729_13h13m51s_grim
20240729_13h13m51s_grim813×1036 117 KB

5

Yes multi line list items is usually where things break if it’s not proper monospace. None of your items in the screenshot exceed one line though. If you keep things short I’m sure it’s ok :wink:

6

Yep, you are right. Same page on phone screen:

1000091192
1000091192720×1600 55.8 KB

7

Is there a way we can make the list items look okay even with non-monospace fonts? Some non-programmer users might not be very comfortable with the monospace font. :sweat_smile:

8

Honestly, I don’t know of any way to achieve that using CodeMirror (the editor component SB uses), which is primarily aimed at building code editors (which tend to use monospaced fonts). And looking at how (no offense) crappy this seems to look in tools like Obsidian (where non-monospaced fonts are more commonly used), I think they haven’t figured this out either.

9

Obsidian I think has sorted out the bulleted list issue:

Screenshot 2024-07-31 at 7.47.10 PM

10

Ah ok. I’ve seen it broken before maybe they resolved it. Perhaps we can somehow dig into how they achieved this.

2 Likes
11

I found that you can import any font using the @import statement on the space-style

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

html {
  --editor-width: 90% !important;
  --editor-font: "Roboto Mono" !important;
}

this works on every device I use.