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

Features
6

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.

2 Likes