# How do I change the font size of code output in a Jupyter Notebook within the notebook itself?

**URL:** <https://discourse.jupyter.org/t/how-do-i-change-the-font-size-of-code-output-in-a-jupyter-notebook-within-the-notebook-itself/1507>\
**Category:** Notebook\
**Created:** [June 28, 2019, 5:57pm UTC](https://discourse.jupyter.org/t/how-do-i-change-the-font-size-of-code-output-in-a-jupyter-notebook-within-the-notebook-itself/1507 "2019-06-28T17:57:41Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ArlenePena](https://avatars.discourse-cdn.com/v4/letter/a/34f0e0/32.png) [@ArlenePena](https://discourse.jupyter.org/u/ArlenePena)\
**Post date:** [June 28, 2019, 5:57pm UTC](https://discourse.jupyter.org/t/how-do-i-change-the-font-size-of-code-output-in-a-jupyter-notebook-within-the-notebook-itself/1507/1 "2019-06-28T17:57:41Z")

</div>

I have a set of Jupyter Notebooks (v5.4.0) that I store on GitHub so that users can access them through Binder.

I would like to reduce the font size of the output of code blocks for the user. All information I can find on changing the font size relates to changing the `custom.css` file. This file changes what _I_ see in my own browser, but it is not part of the repo, cannot be pushed to GitHub, and is not served by Binder, so altering this file does nothing for what my users see.

Is there a way to change the output font size that’s native to the notebook itself and would therefore survive being channeled through GitHub and Binder?

---

<div class="post-metadata">

**Author:** ![betatim](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/betatim/32/10_2.png) [@betatim](https://discourse.jupyter.org/u/betatim)\
**Post date:** [June 29, 2019, 8:09am UTC](https://discourse.jupyter.org/t/how-do-i-change-the-font-size-of-code-output-in-a-jupyter-notebook-within-the-notebook-itself/1507/2 "2019-06-29T08:09:47Z")

</div>

I think you should be able to include the `custom.css` in your repository so that it gets used when you start your reopsitory on [mybinder.org](http://mybinder.org).

Your repository ends up as the home directory of the user. This means files that live at `~/.jupyter/` on your local machine should go to `.jupyter/` in your repository and should be taken into account when your binder starts.

---

<div class="post-metadata">

**Author:** ![ArlenePena](https://avatars.discourse-cdn.com/v4/letter/a/34f0e0/32.png) [@ArlenePena](https://discourse.jupyter.org/u/ArlenePena)\
**Post date:** [July 1, 2019, 6:00pm UTC](https://discourse.jupyter.org/t/how-do-i-change-the-font-size-of-code-output-in-a-jupyter-notebook-within-the-notebook-itself/1507/3 "2019-07-01T18:00:04Z")

</div>

Thanks for the response!

I created a `.jupyter/` folder in the repo and added `.jupyter/custom/custom.css` with the content

```auto
div.output pre {
    font-size: 9pt;
    color: red;
}

```

I then pushed this to the GitHub repo and viewed the result through Binder. It successfully turned the text red, indicating the CSS was recognized, but it didn’t change the font size at all (I also tried 3pt just to be sure).

Is there anything else I can try?

---

<div class="post-metadata">

**Author:** ![betatim](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/betatim/32/10_2.png) [@betatim](https://discourse.jupyter.org/u/betatim)\
**Post date:** [July 1, 2019, 7:27pm UTC](https://discourse.jupyter.org/t/how-do-i-change-the-font-size-of-code-output-in-a-jupyter-notebook-within-the-notebook-itself/1507/4 "2019-07-01T19:27:01Z")

</div>

My guess is that if the `custom.css` is being picked up but the font size doesn’t change it is because `font-size` isn’t the right rule/property. I’d investigate with the dev console of your browser to see what you have to do there to change the font size.

---

<div class="post-metadata">

**Author:** ![pbarton666](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@pbarton666](https://discourse.jupyter.org/u/pbarton666)\
**Post date:** [November 2, 2019, 9:08pm UTC](https://discourse.jupyter.org/t/how-do-i-change-the-font-size-of-code-output-in-a-jupyter-notebook-within-the-notebook-itself/1507/5 "2019-11-02T21:08:30Z")

</div>

betatun is correct - you can dig these settings out of your browser’s inspector tool and them to your custom.css (likely ~/.jupyter/custom/custom.css):

/\* Change output font size\*/  
.rendered\_html table{  
font-size: 16px !important;  
}

A few other formatting tweaks, in case you’re interested:  
/\* Change inner background (for code) \*/  
div.input\_area {  
background: white !important;  
font-size: 16px !important;  
}

/\* Change global font size (for code) \*/  
.CodeMirror {  
font-size: 16px !important;  
font-family: monospace;  
}

/\*These homogenize the colors of various code elements to black (they render better printed) \*/  
.cm-s-ipython span.cm-negative {color: black;}  
.cm-s-ipython span.cm-positive {color: black;}  
.cm-s-ipython span.cm-keyword{color: black;}  
.cm-s-ipython span.cm-comment{color: black;}  
.cm-s-ipython span.cm-string{color: black;}  
.cm-s-ipython span.cm-string-2{color: black;}  
.cm-s-ipython span.cm-punctuation{color: black;}  
.cm-s-ipython span.cm-number{color: black;}

---

<div class="post-metadata">

**Author:** ![choldgraf](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/choldgraf/32/1264_2.png) [@choldgraf](https://discourse.jupyter.org/u/choldgraf)\
**Post date:** [November 2, 2019, 11:45pm UTC](https://discourse.jupyter.org/t/how-do-i-change-the-font-size-of-code-output-in-a-jupyter-notebook-within-the-notebook-itself/1507/6 "2019-11-02T23:45:18Z")

</div>

Another option is to try adding the `!important` tag to your CSS rule, in case it’s being over-ridden by another rule. That’s generally discouraged in web development but I think in this case it’s reasonable to try.