Home / GitHub Page

Tweak Font Family of the app

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:

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

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;
}

Thanks a ton. That worked :smiley:

1 Like

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

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

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

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

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.

Got it. Thanks Amanda.

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