Personalizing the font

Using different fonts#

Trilium comes by default with its own font (Inter), but the font can be adjusted in Options → Appearance, by checking Use different fonts in the Fonts section.

The font can be personalized for the following areas of the application:

  • Interface text, for most of the UI (menus, toolbars, dialogs).
  • Note Tree.
  • Document text, for the actual content of the notes (especially for Text notes).
  • Monospace text, e.g. for Code notes and Code blocks.

Each area also has its own Size. The note tree and document sizes are relative to the interface size, so changing the interface size moves them along with it.

The list of fonts contains the following items:

  • Generic fonts
    • Theme defined which uses the font that is embedded with the current theme. For example on the default modern theme, the font is Inter. This does not require the font to be installed.
    • System default which uses a combination of fonts that works best for the desktop app. For example on Windows it will use Segoe UI.
    • Generic font selections for fonts with serifs (e.g. Times New Roman-like), no serifs and monospace.
  • Web fonts which appear on the Server Installation, which is a predefined list of fonts and grouped into Sans-serif, serif, monospace and handwriting. The fonts that are not supported by your system (i.e. not installed) are not displayed.
  • System fonts which appear on the Desktop Installation. Unlike the server fonts which are predefined, the system fonts are listed from your operating system.
  • Custom fonts, allowing any font to be used provided it's imported into Trilium. See the section below for more information.

Font changes take effect after a reload; the section offers a Reload to apply changes button once something has been changed.

Custom fonts#

A font file imported into Trilium can be used by the application itself, without writing any CSS.

Adding a font#

  1. Import the font file, by dragging it into the Note Tree or through Import into note. TrueType (.ttf), OpenType (.otf) and Web Open Font Format (.woff, .woff2) files are recognized; the note takes the font's name without its extension and is marked with a font icon (an “A” icon).
  2. Select the resulting note where a preview of a font will be displayed: a specimen line to type your own text into, a slider for its size, a preview in multiple sizes, and the Latin character set.
  3. Turn on In font picker above the specimen.
  4. In Options → Appearance → Fonts, the font is now offered under Custom fonts, ahead of the built-in families, and can be set for any of the four areas.

How custom fonts behave#

  • Each entry is named after its note, so renaming the note renames the entry. The setting refers to the note itself rather than to its name, and keeps working across a rename.
  • The font file is an ordinary note, so Synchronization carries it to your other devices. The choice of font is not synced: appearance settings are deliberately kept per-device, so on another device the font is already there and only needs to be selected again.
  • A font kept in a protected note can only be previewed and used while the protected session is open.

For theme authors, a font can also be embedded in a theme's CSS through Custom Resource Providers, which is the route to take when the font should come with the theme rather than be chosen in the settings.

Downloading from Google Fonts#

A large selection of fonts can be easily retrieved from Google Fonts, as follows:

  1. Go to https://fonts.google.com.
  2. Search for a desired font.
  3. Press Get font in the top right.
  4. Check that the list of fonts on the left side corresponds to your selection.
  5. Press Download all.
  6. In the Note Tree, create a note where to store the new fonts.
  7. In the Note Tree, drag-and-drop the .zip file directly onto the newly created note and follow the steps from the previous section.

Programming ligatures#

Some fonts support programming ligatures, which will turn character combinations such as != into ≠ or -> as → in Code blocks and Code notes.

These are only a display affordance, so copying the text is not affected. Regardless, this feature can be disabled in Trilium by unchecking Programming ligatures in the font settings.