# How to change editor and ui fonts
**URL:** https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752
**Category:** Tricks & Techniques
**Created:** [July 29, 2024, 2:59pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752 "2024-07-29T14:59:58Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@nikolasdi](https://community.silverbullet.md/u/nikolasdi)
#### Post date: [July 29, 2024, 2:59pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/1 "2024-07-29T14:59:58Z")
- 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:
```space-style
@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.
---
### Author:  [@meain](https://community.silverbullet.md/u/meain)
#### Post date: [July 29, 2024, 4:01pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/2 "2024-07-29T16:01:30Z")
> [@nikolasdi](#):
>
> `url('http://127.0.1.1:3000/iAWriterQuattroV.ttf')`
FYI, you can probably do `url('/iAWriterQuattroV.ttf')` which would pick up the host from the current page.
---
### Author:  [@zef](https://community.silverbullet.md/u/zef)
#### Post date: [July 29, 2024, 4:07pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/3 "2024-07-29T16:07:50Z")
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)?
---
### Author:  [@nikolasdi](https://community.silverbullet.md/u/nikolasdi)
#### Post date: [July 29, 2024, 4:25pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/4 "2024-07-29T16:25:05Z")
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:
> **[iA Writer has three custom made writing fonts that are available for download](https://ia.net/topics/a-typographic-christmas)**
>
> iA Writer 5.2 comes with three custom made variable writing fonts that are available for download on GitHub.
and here is a screenshot from SB:
---
### Author:  [@zef](https://community.silverbullet.md/u/zef)
#### Post date: [July 29, 2024, 4:29pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/5 "2024-07-29T16:29:32Z")
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 😉
---
### Author:  [@nikolasdi](https://community.silverbullet.md/u/nikolasdi)
#### Post date: [July 29, 2024, 4:33pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/6 "2024-07-29T16:33:44Z")
Yep, you are right. Same page on phone screen:
---
### Author:  [@daydaya](https://community.silverbullet.md/u/daydaya)
#### Post date: [July 31, 2024, 7:59am UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/7 "2024-07-31T07:59:10Z")
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. 😅
---
### Author:  [@zef](https://community.silverbullet.md/u/zef)
#### Post date: [July 31, 2024, 8:52am UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/8 "2024-07-31T08:52:58Z")
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.
---
### Author:  [@meain](https://community.silverbullet.md/u/meain)
#### Post date: [July 31, 2024, 2:18pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/9 "2024-07-31T14:18:06Z")
Obsidian I think has sorted out the bulleted list issue:
---
### Author:  [@zef](https://community.silverbullet.md/u/zef)
#### Post date: [July 31, 2024, 5:00pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/10 "2024-07-31T17:00:28Z")
Ah ok. I’ve seen it broken before maybe they resolved it. Perhaps we can somehow dig into how they achieved this.
---
### Author:  [@mcardielo](https://community.silverbullet.md/u/mcardielo)
#### Post date: [October 16, 2024, 3:18pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/11 "2024-10-16T15:18:15Z")
I found that you can import any font using the @import statement on the `space-style`
```auto
@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.
---
### Author:  [@nono](https://community.silverbullet.md/u/nono)
#### Post date: [April 22, 2025, 7:08pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/12 "2025-04-22T19:08:06Z")
For all those who are new to SilverBullet and just googled how to change the font, note that the css must be inside a [Space Style](https://silverbullet.md/Space%20Style) block.
````auto
```space-style
@font-face {
font-family: 'Helvetica';
}
#sb-root {
--editor-font: "Helvetica" !important;
--ui-font: "Helvetica" !important;
}
```
````
---
### Author:  [@armand000](https://community.silverbullet.md/u/armand000)
#### Post date: [June 19, 2026, 7:00pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/13 "2026-06-19T19:00:58Z")
Hello,
If I choose a non-monospaced font, the bulleted-list-issue still occurs. Is there a way to change this? Furthermore, the code blocks and the text between `` (which has to appear monospaced) also become non-monospaced, which is a real drawback. It would be very helpful to be able to easily choose the font I want without any negative consequences.
Thank you in advance!
---
### Author:  [@zef](https://community.silverbullet.md/u/zef)
#### Post date: [June 19, 2026, 7:46pm UTC](https://community.silverbullet.md/t/how-to-change-editor-and-ui-fonts/752/14 "2026-06-19T19:46:49Z")
Yeah, I don’t think this will happen anytime soon. Monospace fonts only for now.