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

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?

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.

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.

Thanks for the response!

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

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?

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.