Default internal font, CSS rules

Support
1

What is the default font-family used by Joplin for notes?
Also, where can I see the default internal CSS rules used by Joplin?

I use Joplin 1.0.227 on macOS.

2

I’m also interested in this, mainly for the note renderer; the Markdown editor is fine, IMHO, but I’d like to switch it to use a serif font, etc.

Worst-case, I have to create a note with all the Markdown in it, then use dev tools to see what’s what in a rendered note.

3

I think in most cases it is being defined simply as sans-serif, meaning it will depend on your operating system. I am not sure if that is true of all of the built in themes.

As far as I know, no one has documented all the rules. A bunch of us have shared our customizations here: Share your CSS

I've considered working on documenting the CSS better, but there is work in progress to implement a new base theme, so I want to wait to see what comes from that.

To change your base font for the rendered note, add the following to userstyle.css

body{
    font-family: "your-font-name" !important;
}

For the rest of the app you can add the following to userchrome.css (this assumes you use the ace editor):

* {
 font-family: "your-font-name" !important;
}
.ace_editor * {
    font-family: "monospace-font" !important;
}

Both of these files are accessible from Settings > Appearance > Advanced.

To find other available CSS styles: Dev tools instructions

4

Big thanks! I found what i want — “font-family: Avenir, Arial, sans-serif”.

Dev Tools, I thought it was unavailable.

1 Like
5

Is there any way to remove the line under the heading H1?

<h1>Header</h1>

image

6

In userstyle.css

h1 {
   border-bottom: none;
}
7

Thanks!
I kept thinking about the property responsible for it, I already worked with it for another element today, but I didn't think to check it.

BIG THANKS!))