Specify non-Latin font fallback

[whitewall]

Operating system

Windows

Joplin version

3.0.14

Desktop version info

Joplin 3.0.14 (prod, win32)

Client ID: 55ce0b2fbc8e4c0c8c573a6923b41b59
Sync Version: 3
Profile Version: 47
Keychain Supported: Yes

Revision: 05cf51e

Backup: 1.4.4
Better Code Blocks: 2.0.1
CodeMirror Line Numbers: 2.0.0
Ez Table: 1.0.2
Favorites: 1.3.2
Insert Date: 1.0.1
Note list (Preview): 0.0.1
Note list and sidebar toggle buttons: 1.0.3
Note Tabs: 1.4.0
Outline: 1.5.14
Paste Special: 1.1.2
Persistent Editor Layout: 2.2.0
Remove Images: 0.0.2
Reset Checkboxes: 1.1.2
Rich Markdown: 0.16.0
Search & Replace: 2.2.0
Table Formatter Plugin: 1.2.1

Editor

Markdown Editor

What issue do you have?

I need to specify a second font for the editor for Sinhala letters. When I set the font (using the options>appearance field) to Noto Sans Sinhala that works, but then the English letters are some backup system font. I normally had the editor font to Fira Sans.

I have tried userstyle.css

body {
	font-family: "Fira Sans","Noto Sans Sinhala"!important;
}

and

* {
	font-family: "Fira Sans","Noto Sans Sinhala"!important;
}

But neither does anything. I'm afraid I'm doing something stupid.

I have also tried a list of comma separated fonts in the appearance setting but that didn't work either.

This similar question never got an answer. Surely there must be a way to do this that I'm missing.

[personalizedrefriger]

@whitewall

I have tried userstyle.css

Try userchrome.css with

.cm-editor * {
	font-family: "Fira Sans","Noto Sans Sinhala"!important;
}

[whitewall]

@personalizedrefriger

.cm-editor * {
	font-family: "Fira Sans","Noto Sans Sinhala"!important;
}

Oh, snap. Should be using `userchrome.css`. OK, I’m working there now. Thanks!!

However, your suggestion didn’t work.

So I inspected and saw this:

When I modified that line in the explorer to have font-family: "Fira Sans","Noto Sans Sinhala"!important; it worked. So it seems that is what I need to include. However, putting this in `userchrome.css` did not work:

.CodeMirror5 *, .cm-editor .cm-content {font-family: "Fira Sans","Noto Sans Sinhala"!important;}

Any ideas?

[personalizedrefriger]

Try further increasing the style sheet specificity:

body .CodeMirror5 *, body .cm-editor .cm-content {
   font-family: "Fira Sans","Noto Sans Sinhala"!important;
}

Or alternatively,

.CodeMirror5.CodeMirror5 *, .cm-editor.cm-editor .cm-content {
   font-family: "Fira Sans","Noto Sans Sinhala"!important;
}

(For reference, this is where the default !important styles are being set).

[whitewall]

@personalizedrefriger

body .CodeMirror5 *, body .cm-editor .cm-content {
   font-family: "Fira Sans","Noto Sans Sinhala"!important;
}

Thank you! This worked.

I am trying to figure out more of the places this needs to be set and I have come up with this so far:

body .CodeMirror5 *, 
body .cm-editor .cm-content, 
input.title-input,
div.item-list *, 
a.list-item,
div.note-list-item > .content > .title > span,
.note-list .list-item div.title 
 {
   font-family: "Fira Sans","Font Awesome 5 Free","icomoon","Noto Sans Sinhala"!important;
}

I had to include "Font Awesome 5 Free","icomoon" otherwise the folder arrows (open close) and the tags and all post icons in the folder pane got tofued.

It would be awesome if there was a more built-in way for people to set a list of fonts through the interface. Maybe a Google Summer of Code project? I imagine there are other folks who could use this.

Thanks!!!

I’m marking solved but I appreciate any other thoughts on this matter.