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

**URL:** <https://discourse.joplinapp.org/t/how-to-change-font-family-and-font-size-in-preview-panel/4052>\
**Category:** Features\
**Created:** [24 October 2019 16:33 UTC](https://discourse.joplinapp.org/t/how-to-change-font-family-and-font-size-in-preview-panel/4052 "2019-10-24T16:33:23Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jearton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/jearton/32/10650_2.png) [@jearton](https://discourse.joplinapp.org/u/jearton)\
**Post date:** [24 October 2019 16:33 UTC](https://discourse.joplinapp.org/t/how-to-change-font-family-and-font-size-in-preview-panel/4052/1 "2019-10-24T16:33:23Z")

</div>

![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/c/c2e6d40710a5c7b2b5e1f87696e9b02addfec029.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![CalebJohn](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/calebjohn/32/356_2.png) [@CalebJohn](https://discourse.joplinapp.org/u/CalebJohn)\
**Post date:** [24 October 2019 18:12 UTC](https://discourse.joplinapp.org/t/how-to-change-font-family-and-font-size-in-preview-panel/4052/2 "2019-10-24T18:12:57Z")

</div>

In Joplin the preview pane can be customized using CSS, please see [the documentation] ([https://github.com/laurent22/joplin/blob/master/README.md#custom-css](https://github.com/laurent22/joplin/blob/master/README.md#custom-css)) for info on how to do this.

---

<div class="post-metadata">

**Author:** ![wallyreport](https://avatars.discourse-cdn.com/v4/letter/w/ce73a5/32.png) [@wallyreport](https://discourse.joplinapp.org/u/wallyreport)\
**Post date:** [13 January 2020 17:10 UTC](https://discourse.joplinapp.org/t/how-to-change-font-family-and-font-size-in-preview-panel/4052/3 "2020-01-13T17:10:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CalebJohn](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/calebjohn/32/356_2.png) [@CalebJohn](https://discourse.joplinapp.org/u/CalebJohn)\
**Post date:** [13 January 2020 17:35 UTC](https://discourse.joplinapp.org/t/how-to-change-font-family-and-font-size-in-preview-panel/4052/4 "2020-01-13T17:35:01Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![skim1124](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/skim1124/32/7296_2.png) [@skim1124](https://discourse.joplinapp.org/u/skim1124)\
**Post date:** [18 February 2021 04:26 UTC](https://discourse.joplinapp.org/t/how-to-change-font-family-and-font-size-in-preview-panel/4052/5 "2021-02-18T04:26:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [20 February 2021 23:03 UTC](https://discourse.joplinapp.org/t/how-to-change-font-family-and-font-size-in-preview-panel/4052/6 "2021-02-20T23:03:53Z")

</div>

> [@skim1124](#):
>
> I'm looking in userchrome.css

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).

> [@skim1124](#):
>
> but I don't see any reference to font name or font family

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.

```css
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](https://discourse.joplinapp.org/t/share-your-css/1730) has lots of examples, admitedly it is a bit awkward to read. This [wiki page](https://discourse.joplinapp.org/t/joplin-customization/11195) also has examples of customising Joplin itself using **userchrome.css**.

---

<div class="post-metadata">

**Author:** ![skim1124](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/skim1124/32/7296_2.png) [@skim1124](https://discourse.joplinapp.org/u/skim1124)\
**Post date:** [21 February 2021 02:30 UTC](https://discourse.joplinapp.org/t/how-to-change-font-family-and-font-size-in-preview-panel/4052/7 "2021-02-21T02:30:14Z")

</div>

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