Help with CSS customisation

[Stephane-30]

Hi there,
There are a few visual elements in PN which I would like to change. I have managed to find the css block for changing some of the visuals in the dashboard cards. However, for some other elements I can't find the correct entries. I would like to change the following:

1. Markup editor font. I prefer mono fonts for editing.
2. Overall main font for the app. I find the default font a bit difficult to read.

Thanks for your help

[timothepoznanski]

Hi! 😊

Both are doable from a custom CSS file (Settings → Custom CSS). I tested both snippets below on a live instance.

1. Monospace font in the markdown editor

The markdown editor is a CodeMirror instance. Poznote has an internal rule that forces the default font inside notes with high specificity, so a plain override silently loses:

.markdown-codemirror-host :is(.cm-scroller, .cm-content, .cm-line, .cm-line *, #mono#mono#mono) {
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, Menlo, monospace !important;
}

This only affects the editing view, the rendered preview keeps the normal font.

2. Overall app font

Poznote bundles a font called Inter and references it by name throughout. Rather than fighting specificity, re-declare the Inter font-face so it points to a font installed on your machine (your custom CSS loads last, so it wins everywhere, even where the font is forced):

@font-face {
    font-family: 'Inter';
    src: local('Verdana');
    font-weight: 400;
}
@font-face {
    font-family: 'Inter';
    src: local('Verdana');
    font-weight: 600;
}

Replace Verdana with any locally installed font. Keep both blocks, the second covers bold/semibold.

[Stephane-30]

Tim, that's amazing! Thank you for taking the time to sort this. Editing a note is now so much easier and additionally, you can clearly see when in editing mode.
The Inter font is too condensed for me and I like it a bit wider for better readability.
Thank again.

I know you are busy working on PN, but you really ought to start a simple blog on your website explaining all those little mods to help users getting most out of PN :-)

[timothepoznanski]

Thanks for the feedback. Glad it helps. 😊 Notice that in the settings you can amso change some text size.
Yes I would love to do that but I lack a bit of time between work, kids etc. 😅 But yes it could be great because some features are a bit hidden to let PN UI be as simple and clean as possible.