Change font in note

[ahinterl]

Following the docs, I've created a CSS file with this content:

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    src: url('/custom/fonts/UbuntuSans-Regular.ttf');
}

:root {
    --main-font-family: 'Ubuntu';
    --main-font-size: normal;
    --tree-font-family: inherit;
    --tree-font-size: normal;
    --detail-font-family: inherit;
    --detail-font-size: normal;
    --detail-text-font-family: 'Ubuntu';
}

div {
	font-family: 'Ubuntu';
}

I've uploaded the Ubuntu font, and have added the required attributes. My Trilium GUI now successfully uses Ubuntu Sans (the rest of the settings falls back to the next-lite theme).

Unfortunately, text that I enter in a new note is not Ubuntu:

What am I missing?

[dosubot[bot]]

Hi @ahinterl! I'm Dosu and I’m helping the Trilium team.

The note content area in Trilium uses CKEditor, which applies its own CSS classes and variables, so generic selectors like div { font-family: ... } won't affect the note text. To make your custom font work for note content, set the --detail-font-family variable to 'Ubuntu' in your CSS, like this:

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    src: url('/custom/fonts/UbuntuSans-Regular.ttf');
}

:root {
    --detail-font-family: 'Ubuntu';
}

.note-detail-editable-text,
.note-detail-editable-text .ck-content,
.ck-editor__editable {
    font-family: 'Ubuntu' !important;
}

This targets the actual editor surface and ensures the font applies to new note text. Make sure your font file path is correct and reload Trilium or clear your browser cache if you don't see changes. If it still doesn't work, check the browser console for font loading errors or try a system font for testing. For more details, see the relevant code and CSS.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[ahinterl]

Thank you, this helped.

Is there any way to replace those "faux" font styles (italics, bold) in notes with true font faces (i. e. use UbuntuSans-Italics.ttf, UbuntuSans-ItalicsBold.ttf instead of bold and bold italics artificially created from a single font face UbuntuSans-Regular.ttf)?

[dosubot[bot]]

Yes, you can use true font faces for bold and italic in Trilium notes by defining multiple @font-face rules for each variant (regular, italic, bold, bold italic) with the same font-family name but different font-weight and font-style attributes. CKEditor in Trilium will automatically use the correct font file for bold and italic text if you set this up.

Here's an example for Ubuntu Sans:

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: normal;
    src: url('/custom/fonts/UbuntuSans-Regular.ttf');
}
@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: normal;
    src: url('/custom/fonts/UbuntuSans-Italic.ttf');
}
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: bold;
    src: url('/custom/fonts/UbuntuSans-Bold.ttf');
}
@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: bold;
    src: url('/custom/fonts/UbuntuSans-BoldItalic.ttf');
}

:root {
    --detail-font-family: 'Ubuntu';
}

.note-detail-editable-text,
.note-detail-editable-text .ck-content,
.ck-editor__editable {
    font-family: 'Ubuntu' !important;
}

Make sure the file paths and font file names match your actual files. After updating your CSS, reload Trilium and clear your browser cache if needed. CKEditor will now use the correct font file for bold, italic, and bold italic text in your notes, as long as the @font-face rules are set up as above and --detail-font-family points to your custom font family. For reference, Trilium's own CSS uses this approach for multiple font weights and CKEditor respects these settings for note content (see example).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}