Tweak Font Family of the app

Support
1

Hey guys. I recently migrated to Joplin from Evernote... Loving it so far.

I had a quick query.

Is there a way to change the font-family of the app? Just to be clear, I'm not referring to the font-family of the Editor / Markdown Preview... But the whole of the app.

I tried adding the following to userchrome.css

*, #joplin-container-body {
font-family: 'Work Sans';
}

This did help. But it didn't change the font-family of a lot of other text like date, buttons, etc. Check the screenshot below:

Image 2020-05-17 at 7.26.03 PM
Image 2020-05-17 at 7.26.03 PM1389×873 364 KB

OS: MacOS
App Version: Joplin 1.0.201 (prod, darwin)

2

You almost have it, just need an !important. This is because most of the styles are applied directly to the elements. Changing the font will also override the font for the icons, so you might want to add that back:

* {
    font-family:  'Work Sans' !important;
}

.fa {
    font: normal normal normal 14px/1 ForkAwesome !important;
}
3

Thanks a ton. That worked :smiley:

1 Like
4

Wow, my solution broke almost immediately. The font was switched in 1.0.209, so all the icons disappeared. When you update to 1.0.209 you will need to change to:

* {
    font-family:  'Work Sans' !important;
}

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

Hey Amanda,
I just realized the "Markdown" icon disappeared with the following code in the new version:

Image 2020-10-10 at 12.10.41 PM
Image 2020-10-10 at 12.10.41 PM903×220 15.4 KB

* {
    font-family:  'Work Sans' !important;
}

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

Hmm, yes, looks like this also is affected by how the icon font works in the new version Share your CSS. Before, each icon had the class of .fa, .far, or .fas, but that is no longer true. Unfortunately not a quick fix this time, will need to find each icon class separately to override.

7

Got it. Thanks Amanda.

8

Found a workaround, that works ~80% of the time Share your CSS

1 Like