How to change font family and font size in preview panel?

I am using macOS desktop application.

As shown above, the editor font size is 16 and font family is Monaco, but preview font has no changes.

In Joplin the preview pane can be customized using CSS, please see [the documentation] ( for info on how to do this.

I have just installed Joplin 1.0.175. Still evaluating.

It is disappointing that something as simple as changing font size is such an ordeal.

While I agree that maybe the font size should be easier to change, the nice thing about using CSS files is that you can change everything, not only what the joplin devs think is important. This is very powerful, and a feature enjoyed by many Joplin users (including myself)

I'm looking in userchrome.css to change the font, but I don't see any reference to font name or font family.

The original post was about changing the font in the page where the Markdown is rendered. This is the viewer pane when using the Markdown / Viewer editing method (not the WYSIWYG editor).

How the viewer pane displays notes is controlled using the userstyle.css file, not userchrome.css (which controls how the app itself looks).

By default the css files are empty apart from a couple of comments. You add css to these files to change the bits you want to change.

For example, if you want to change the body font in the rendered note you can add the below to userstyle.css. After adding this text and saving the file you must restart Joplin. Not close and reopen the window, close the app using File > Quit and restart.

body {
	font-family: "Comic Sans MS";
	/* sets body font */
	font-size: 24px;
	/* sets body text font size in pixels */
	color: #ff00ff;
	/* sets body text font colour */

The thread Share Your CSS has lots of examples, admitedly it is a bit awkward to read. This wiki page also has examples of customising Joplin itself using userchrome.css.


Thank you. I got it to work. There's so much I don't know about markdown and css.

1 Like