Font in Custom CSS does not alter Bielefeld theme font

[DutchPete]

Description

I am using the Bielefeld theme, but want to have a different font with it. So, according to your documentation page, this what I put in the Custom CSS file:

#editor {
    font-family: '<DejaVu Sans Condensed>', <sans-serif>;
}

But that does not change the font in Bielefeld.

Reproducing

Add the code above to Custom CSS, and see the non-result.

Expected behaviour

I would expect the Custom CSS file to take prevalence.

Screenshots

Platform

• OS: Linux Mint
• OS Version 19.2
• Zettlr Version 1.4.1
• Screen Resolution [only necessary if the bug is relating to the GUI]

Additional information

[nathanlesage]

I strongly assume the greather-than and less-than-signs (< and >) are not part of the font's name, correct? It might help if you'd remove these. But thanks for the info, I haven't updated the class-list yet.

[DutchPete]

I deleted the angled brackets, but that does not make any difference after closing and reopening the app. Anything else I am not doing right?

[nathanlesage]

It might be that the Bielefeld-theme is overwriting the font at another place. The best way is to switch to develop mode and actually inspect the editor element, then you'll see where it stems from.

Ah, found it. You'll need to namespace it with the body-element, so this should work:

body #editor {
    font-family: 'DejaVu Sans Condensed', sans-serif;
}

[DutchPete]

Thank you @nathanlesage, that works. You can close the issue.

[balthild]

It doesn't work when the theme is set to Frankfurt.

[nathanlesage]

In Frankfurt, the font-family is namespaced to #editor .CodeMirror:

I'll keep this in mind when we refactor the design in future releases to make this homogeneous across themes.