Change font-family of the entire app

[stj]

Operating system

macOS

Joplin version

3.1.1

Desktop version info

Joplin 3.1.1 (prod, darwin)

Sync target

Dropbox

Editor

Markdown Editor

What issue do you have?

I'm trying to change the font family of the app itself (not the editor or rendered markdown). I've attempted to do this via userchrome.css, but unfortunately, it causes all the icons to disappear. Does anyone know a solution to change the font family without affecting the icons?

[tomasz86]

Can you share your current custom CSS code?

[stj]

I tried this

* {
    font-family:  'Oxygen Mono' !important;
}

.fa, .far, .fas {
    font-family: "Font Awesome 5 Free" !important;
}

It did change the font family of the app. But a few icons are missing. Also, it changed the font of the markdown editor.

[tomasz86]

Can you try using just the following?

:root {
	--joplin-font-family: 'Oxygen Mono';
}

[stj]

Nope. It didn't work.

[muzak]

The Markdown icon is missing because it uses the .fab class. Icons under that class use another font that gets overridden by your wildcard selector (*). Add back the default CSS for .fab in userchrome.css:

.fab {
  font-family: "Font Awesome 5 Brands" !important;
}

Rendered Markdown is outside of the scope of userchrome.css and keeps its intended styling.

I may have to get back to you on setting the editor font or excluding the editor from the wildcard selector (*). Selectors like .CodeMirror * or *:not(.CodeMirror *) might not properly achieve the prior goals respectively.

[tomasz86]

I've done some testing, and the following more or less seems to work for me. The icons are preserved, and it's still possible to use a different font for the Code Mirror editor. It also doesn't affect the rendered view and the Rich Text editor.

:not([role="img"]):not([class^="fa"]) {
	font-family: 'Oxygen Mono' !important;
}

:not([role="img"]):not([class^="fa"]) .cm-editor * {
	font-family: 'Arial' !important;
}

Please keep in mind that with this code, you do need to set the Code Mirror editor font in the CSS, as doing it just inside Joplin won't have any effect.

[stj]

Here's what my CSS looks like right now

* {
    font-family:  'Oxygen Mono' !important;
}

.fa, .far, .fas {
    font-family: "Font Awesome 5 Free" !important;

}

.fab {
    font-family: "Font Awesome 5 Brands" !important;
    
}

:not([role="img"]):not([class*="fa"]) {
    font-family: 'Oxygen Mono' !important;
}

:not([role="img"]):not([class*="fa"]) .cm-editor * {
    font-family: 'Arial' !important;
}

The icons in the sidebar are missing.

[tomasz86]

Please remove all the other code, it's not required. Leave just:

:not([role="img"]):not([class^="fa"]) {
	font-family: 'Oxygen Mono' !important;
}

:not([role="img"]):not([class^="fa"]) .cm-editor * {
	font-family: 'Arial' !important;
}

[stj]

Tried it. The icons in the sidebar are missing:

https://share.zight.com/bLuv6pkB
https://share.zight.com/E0uOWPAe

[tomasz86]

Please try this version:

:not([role="img"]):not([class^="fa-"]):not([class*=" fa-"]):not([class^="icon-"]):not([class*=" icon-"]) {
	font-family: 'Oxygen Mono' !important;
}

:not([role="img"]):not([class^="fa-"]):not([class*=" fa-"]):not([class^="icon-"]):not([class*=" icon-"]) .cm-editor * {
	font-family: 'Arial' !important;
}

[stj]

Awesome. This worked. Thanks a ton.

[tomasz86]

I've played around with the code a bit more, and I've managed to tweak it so that you can still set editor font types in the Joplin settings. The font family set in the code below affects the app font only.

:not(.cm-content, .cm-codeBlock, .cm-inlineCode, [role="img"], [class^="fa-"], [class*=" fa-"], [class^="icon-"], [class*=" icon-"]) {
	font-family: 'Oxygen Mono' !important;
}

.cm-content :not(.cm-codeBlock, .cm-inlineCode) {
	font-family: inherit !important;
}

[stj]

It worked. Perfect.

Thanks a ton. Much appreciated.