Trilium: Support for custom fonts

[vballworld]

It'd be great if users can choose the font of choice.

P.S. This is so great. Really would love to see this become the "VS Code" of note taking! Keep going!

[vballworld]

@zadam btw, just realized the css customization which is super awesome for us tech folks! However, for mass adoption, I still think it'd be necessary for a more non-techie friendly way to customize the fonts.

[zadam]

Hi, I plan to work a bit on the design in the next iteration and I can think about letting users choose fonts as well.

[vballworld]

@zadam btw, what's the css tag for the note titles on the left side nav panel? Everything under >> root? I'd like to make just those fonts a bit bigger & couldn't find it in the source code. Thanks!

[zadam]

You can use following code to use the same font size as the rest of the app which is a bit larger:

ul.fancytree-container {
    /* override specific size from fancytree.css */
    font-family: inherit !important;
    font-size: inherit !important;
}

You can also press CTRL-SHIFT-I to open dev tools and look into the HTML structure.

[vballworld]

Ah, the CTRL SHIFT I is perfect. Thanks!

[linonetwo]

If I want code block to use 'Fira Code', how can I do that?

I tried:

code {
    -webkit-font-feature-settings: "liga" on, "calt" on;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: 'Fira Code';
}

But it's not working.

[zadam]

First thing is that code block isn't actually in element "code", but in div with class .CodeMirror. Also it would make sense to use !important directive. Something like this:

.CodeMirror {
    -webkit-font-feature-settings: "liga" on, "calt" on !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    font-family: 'Fira Code' !important;
}

[linonetwo]

Oh, by using .CodeMirror I can change the color of text, so it's working.

But I still can't get that font working, though it is installed on my Mac and works in VSCode.

Can you enable developer tool in the production, just like what VSCode does? It will make this kind of style tweaking easier.

(VSCode can open developer tools on production)

[zadam]

Dev tools are enabled in production builds, just press CTRL+SHIFT+I to open them.

[zadam]

It is possible to define custom fonts in the theme - example is in "Steel Blue" theme provided in the demo document.