Changing default header and text fonts in Pluto

[rpherman]

I did not see where I could change the default font in starting a Pluto notebook, or in an existing notebook.
I am guessing I can edit the HTML/CSS of the produced page, or there is a file that specifies styles and fonts, but I am not familiar with front end enough to easily do this. Thanks.

[fonsp]

You can add a cell like this:

html"""
<style>
pluto-output {
    font-family: monospace;
    color: green;
}
pluto-output h1 {
    font-family: "Comis Sans MS", cursive;
    color: red;
}
</style>
"""

See all the default styles here:

Pluto.jl/frontend/editor.css

Lines 81 to 380 in bac224b

	/* STANDARD HTML ELEMENTS */
	/* (can be overriden by custom style) */
	pluto-output {
	font-family: "Alegreya Sans", sans-serif;
	font-size: 1em;
	font-weight: 400;
	color: hsl(0, 0%, 25%);
	}
	pluto-output h1,
	pluto-output h2,
	pluto-output h3,
	pluto-output h4,
	pluto-output h5,
	pluto-output h6 {
	font-family: "Vollkorn", serif;
	font-feature-settings: "lnum", "pnum";
	font-weight: 600;
	color: hsl(0, 0%, 12%);
	margin-block-start: 1rem;
	margin-block-end: 0rem;
	}
	pluto-output h1,
	pluto-output h2 {
	font-weight: 700;
	margin-block-start: 2rem;
	}
	pluto-output h1:first-child,
	pluto-output h2:first-child {
	margin-block-start: calc(2rem - var(--pluto-cell-spacing));
	}
	pluto-output h1 {
	font-size: 2.2rem;
	border-bottom: 3px solid rgba(0, 0, 0, 0.15);
	margin-bottom: 0.5rem;
	}
	pluto-output h2 {
	font-size: 1.8rem;
	border-bottom: 2px dotted rgba(0, 0, 0, 0.15);
	margin-bottom: 0.5rem;
	}
	pluto-output h1:empty,
	pluto-output h2:empty {
	border-bottom: none;
	}
	pluto-output h3 {
	font-size: 1.6rem;
	/* border-bottom: 2px dotted rgba(0,0,0,.15); */
	}
	pluto-output h4 {
	font-size: 1.4rem;
	}
	pluto-output h5 {
	font-size: 1.2rem;
	}
	pluto-output h6 {
	font-size: 1rem;
	}
	pluto-output h3:first-child,
	pluto-output h4:first-child,
	pluto-output h5:first-child,
	pluto-output h6:first-child {
	margin-block-start: 0px;
	}
	pluto-output br,
	pluto-output p {
	margin-block-start: 0px;
	margin-block-end: var(--pluto-cell-spacing);
	word-spacing: 0.053em;
	line-height: 1.45em;
	}
	pluto-output p:first-child {
	margin-block-start: 0px;
	}
	/* I actually just want to get rid of the margin-block-start on the p tag,
	but css doesn't allow that. So I have to move the list up, instead of not moving it up */
	pluto-output li p + ul,
	pluto-output li p + ol {
	margin-block-start: calc(var(--pluto-cell-spacing) * -1);
	}
	pluto-output p:last-child {
	margin-block-end: 0px;
	}
	pluto-output img,
	pluto-output video {
	max-width: 100%;
	}
	a {
	color: black;
	font-weight: bold;
	}
	pluto-output code {
	font-family: JuliaMono, monospace;
	font-size: 0.75em; /* not rem */
	font-variant-ligatures: none;
	}
	pluto-output.rich_output code {
	padding: 3px;
	border-radius: 8px;
	background-color: #f2f2f2;
	}
	pluto-output.rich_output pre code {
	padding: 0px;
	}
	pluto-output pre {
	display: inline-block;
	margin: 0px;
	white-space: pre-wrap;
	word-break: break-all;
	tab-size: 4;
	-moz-tab-size: 4; /* https://bugzilla.mozilla.org/show_bug.cgi?id=737785 */
	font-family: JuliaMono, monospace;
	font-variant-ligatures: none;
	}
	pluto-output hr {
	border: none;
	border-top: 3px solid rgba(0, 0, 0, 0.15);
	margin-left: 0;
	margin-right: 0;
	}
	pluto-output blockquote {
	margin-left: 1rem;
	margin-right: 1rem;
	}
	pluto-output.rich_output pre,
	pluto-output blockquote {
	margin-block-start: 0px;
	margin-block-end: var(--pluto-cell-spacing);
	display: block;
	padding: 15px;
	border-radius: 15px;
	background-color: #f2f2f2;
	color: #555;
	}
	pluto-output div.admonition {
	border-radius: 8px;
	margin-block-start: 1em;
	margin-block-end: 1em;
	}
	pluto-output div.admonition .admonition-title {
	font-family: "Vollkorn", sans-serif;
	font-feature-settings: "lnum", "pnum";
	color: white;
	font-weight: 600;
	margin-block-end: 0px;
	padding-left: 0.3em;
	}
	pluto-output div.admonition .admonition-title ~ * {
	margin-block-end: 0.5em;
	margin-block-start: 0.5em;
	padding-left: 0.5em;
	transition: filter linear 0.1s;
	}
	pluto-output div.admonition {
	background: rgba(68, 149, 28, 0.2);
	border: 5px solid rgb(158, 200, 137);
	}
	pluto-output div.admonition .admonition-title {
	background: rgb(158, 200, 137);
	margin: -1px; /* Fixes a rendering glitch in Chrome */
	}
	pluto-output div.admonition.note,
	pluto-output div.admonition.info,
	pluto-output div.admonition.hint {
	background: rgba(50, 115, 200, 0.2);
	border: 5px solid rgb(148, 182, 226);
	}
	pluto-output div.admonition.note .admonition-title,
	pluto-output div.admonition.info .admonition-title,
	pluto-output div.admonition.hint .admonition-title {
	background: rgb(148, 182, 226);
	}
	pluto-output div.admonition.warning {
	background: rgba(162, 148, 30, 0.2);
	border: 5px solid rgb(207, 199, 138);
	}
	pluto-output div.admonition.warning .admonition-title {
	background: rgb(207, 199, 138);
	}
	pluto-output div.admonition.danger {
	background: rgba(200, 67, 50, 0.2);
	border: 5px solid rgb(226, 157, 148);
	}
	pluto-output div.admonition.danger .admonition-title {
	background: rgb(226, 157, 148);
	}
	pluto-output div.admonition.hint .admonition-title ~ * {
	filter: blur(0.25em);
	}
	pluto-output div.admonition.hint:hover .admonition-title ~ *,
	pluto-output div.admonition.hint:focus-within .admonition-title ~ * {
	filter: blur(0em);
	}
	pluto-output div.footnote {
	margin-block-start: 1em;
	margin-block-end: 1em;
	}
	pluto-output div.footnote p.footnote-title::before {
	content: "[";
	}
	pluto-output div.footnote p.footnote-title::after {
	content: "]: ";
	}
	pluto-output a.footnote,
	pluto-output div.footnote p.footnote-title {
	font-family: "Roboto Mono", monospace;
	font-size: 0.75rem;
	font-weight: 700;
	margin-block-end: 0px;
	letter-spacing: -0.05em;
	/* font-variant: small-caps; */
	}
	pluto-output div.footnote p.footnote-title ~ * {
	margin-left: 0.1em;
	padding-left: 0.4em;
	border-left: 5px solid rgba(23, 115, 119, 0.15);
	padding-bottom: var(--pluto-cell-spacing);
	margin-block-end: 0px;
	}
	pluto-output div.footnote p:last-child {
	padding-bottom: 0px;
	}
	pluto-output.scroll_y {
	max-height: 80vh;
	max-height: 400px;
	overflow: auto;
	}
	pluto-output table {
	border-collapse: collapse;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-left: none;
	border-right: none;
	margin: 0 auto;
	margin-block-start: var(--pluto-cell-spacing);
	margin-block-end: var(--pluto-cell-spacing);
	}
	pluto-output table > thead {
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
	pluto-output table > tbody td {
	font-family: JuliaMono, monospace;
	font-size: 0.75rem;
	font-variant-ligatures: none;
	}
	pluto-output table td,
	pluto-output table th {
	padding: 0.2rem 0.5rem;
	}
	pluto-output table > tbody tr:hover {
	background-color: rgba(224, 203, 158, 0.15);
	}
	pluto-output table pre {
	white-space: pre;
	}
	pluto-output kbd,
	kbd {
	font-family: "Space Mono", monospace;
	font-size: 0.7rem;
	letter-spacing: -0.7px;
	border: 1px solid #dfdfdf;
	padding: 0px 2px;
	border-radius: 3px;
	}

[fonsp]

To change the styles locally, you can fork Pluto