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