diff --git a/README.md b/README.md
index 6f7951a1..675a66f3 100644
--- a/README.md
+++ b/README.md
@@ -1292,6 +1292,8 @@ the classname of the HTML tag is set according to the selected theme, which is u
 
 see the top of [./copyparty/web/browser.css](./copyparty/web/browser.css) where the color variables are set, and there's layout-specific stuff near the bottom
 
+if you want to change the fonts, see [./docs/rice/](./docs/rice/)
+
 
 ## complete examples
 
diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index ca31c7a3..f7a98132 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -494,6 +494,7 @@ html.dz {
 
 	text-shadow: none;
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 }
 html.dy {
 	--fg: #000;
@@ -603,6 +604,7 @@ html {
 	color: var(--fg);
 	background: var(--bgg);
 	font-family: sans-serif;
+	font-family: var(--font-main), sans-serif;
 	text-shadow: 1px 1px 0px var(--bg-max);
 }
 html, body {
@@ -611,6 +613,7 @@ html, body {
 }
 pre, code, tt, #doc, #doc>code {
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 }
 .ayjump {
 	position: fixed;
@@ -759,6 +762,7 @@ html #files.hhpick thead th {
 }
 #files tbody td:nth-child(3) {
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 	text-align: right;
 	padding-right: 1em;
 	white-space: nowrap;
@@ -821,6 +825,7 @@ html.y #path a:hover {
 .logue.raw {
 	white-space: pre;
 	font-family: 'scp', 'consolas', monospace;
+	font-family: var(--font-mono), 'scp', 'consolas', monospace;
 }
 #doc>iframe,
 .logue>iframe {
@@ -1417,6 +1422,7 @@ input[type="checkbox"]:checked+label {
 }
 html.dz input {
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 }
 .opwide div>span>input+label {
 	padding: .3em 0 .3em .3em;
@@ -1702,6 +1708,7 @@ html.y #tree.nowrap .ntree a+a:hover {
 }
 .ntree a:first-child {
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 	font-size: 1.2em;
 	line-height: 0;
 }
@@ -1859,6 +1866,7 @@ html.y #tree.nowrap .ntree a+a:hover {
 }
 #rn_vadv input {
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 }
 #rui td+td,
 #rui td input[type="text"] {
@@ -1922,6 +1930,7 @@ html.y #doc {
 #doc.mdo {
 	white-space: normal;
 	font-family: sans-serif;
+	font-family: var(--font-main), sans-serif;
 }
 #doc.prism * {
 	line-height: 1.5em;
@@ -1981,6 +1990,7 @@ a.btn,
 }
 #hkhelp td:first-child {
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 }
 html.noscroll,
 html.noscroll .sbar {
@@ -2490,6 +2500,7 @@ html.y #bbox-overlay figcaption a {
 }
 #op_up2k.srch td.prog {
 	font-family: sans-serif;
+	font-family: var(--font-main), sans-serif;
 	font-size: 1em;
 	width: auto;
 }
@@ -2504,6 +2515,7 @@ html.y #bbox-overlay figcaption a {
 	white-space: nowrap;
 	display: inline-block;
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 }
 #u2etas.o {
 	width: 20em;
@@ -2573,6 +2585,7 @@ html.y #bbox-overlay figcaption a {
 #u2cards span {
 	color: var(--fg-max);
 	font-family: 'scp', monospace;
+	font-family: var(--font-mono), 'scp', monospace;
 }
 #u2cards > a:nth-child(4) > span {
 	display: inline-block;
@@ -2738,6 +2751,7 @@ html.b #u2conf a.b:hover {
 }
 .prog {
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 }
 #u2tab span.inf,
 #u2tab span.ok,
diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html
index 0f48b211..76f6fcca 100644
--- a/copyparty/web/browser.html
+++ b/copyparty/web/browser.html
@@ -7,9 +7,9 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.8, minimum-scale=0.6">
 	<meta name="theme-color" content="#333">
-{{ html_head }}
 	<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
 	<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/browser.css?_={{ ts }}">
+{{ html_head }}
 	{%- if css %}
 	<link rel="stylesheet" media="screen" href="{{ css }}_={{ ts }}">
 	{%- endif %}
diff --git a/copyparty/web/browser2.html b/copyparty/web/browser2.html
index 66d4f0fc..03195b4e 100644
--- a/copyparty/web/browser2.html
+++ b/copyparty/web/browser2.html
@@ -6,12 +6,12 @@
 	<title>{{ title }}</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.8">
-{{ html_head }}
 	<style>
 		html{font-family:sans-serif}
 		td{border:1px solid #999;border-width:1px 1px 0 0;padding:0 5px}
 		a{display:block}
 	</style>
+{{ html_head }}
 </head>
 
 <body>
diff --git a/copyparty/web/md.css b/copyparty/web/md.css
index 0b1cd49c..e964865f 100644
--- a/copyparty/web/md.css
+++ b/copyparty/web/md.css
@@ -2,6 +2,7 @@ html, body {
 	color: #333;
 	background: #eee;
 	font-family: sans-serif;
+	font-family: var(--font-main), sans-serif;
 	line-height: 1.5em;
 }
 html.y #helpbox a {
@@ -67,6 +68,7 @@ a {
 	position: relative;
 	display: inline-block;
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 	font-weight: bold;
 	font-size: 1.3em;
 	line-height: .1em;
diff --git a/copyparty/web/md.html b/copyparty/web/md.html
index 07bd5634..1ea1909f 100644
--- a/copyparty/web/md.html
+++ b/copyparty/web/md.html
@@ -4,12 +4,12 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.7">
 	<meta name="theme-color" content="#333">
-{{ html_head }}
 	<link rel="stylesheet" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
 	<link rel="stylesheet" href="{{ r }}/.cpr/md.css?_={{ ts }}">
 	{%- if edit %}
 	<link rel="stylesheet" href="{{ r }}/.cpr/md2.css?_={{ ts }}">
 	{%- endif %}
+{{ html_head }}
 </head>
 <body>
 	<div id="mn"></div>
diff --git a/copyparty/web/md2.css b/copyparty/web/md2.css
index af6139ab..ec4a7b29 100644
--- a/copyparty/web/md2.css
+++ b/copyparty/web/md2.css
@@ -56,6 +56,7 @@
 	padding: 0;
 	margin: 0;
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 	white-space: pre-wrap;
 	word-break: break-word;
 	overflow-wrap: break-word;
diff --git a/copyparty/web/mde.css b/copyparty/web/mde.css
index 7b1d2618..0a8d8ec5 100644
--- a/copyparty/web/mde.css
+++ b/copyparty/web/mde.css
@@ -17,6 +17,7 @@ html, body {
 	padding: 0;
 	min-height: 100%;
 	font-family: sans-serif;
+	font-family: var(--font-main), sans-serif;
 	background: #f7f7f7;
 	color: #333;
 }
diff --git a/copyparty/web/mde.html b/copyparty/web/mde.html
index d9b3c056..31618851 100644
--- a/copyparty/web/mde.html
+++ b/copyparty/web/mde.html
@@ -4,11 +4,11 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.7">
 	<meta name="theme-color" content="#333">
-{{ html_head }}
 	<link rel="stylesheet" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
 	<link rel="stylesheet" href="{{ r }}/.cpr/mde.css?_={{ ts }}">
 	<link rel="stylesheet" href="{{ r }}/.cpr/deps/mini-fa.css?_={{ ts }}">
 	<link rel="stylesheet" href="{{ r }}/.cpr/deps/easymde.css?_={{ ts }}">
+{{ html_head }}
 </head>
 <body>
 	<div id="mw">
diff --git a/copyparty/web/msg.css b/copyparty/web/msg.css
index 764cee5d..ab8fa4d1 100644
--- a/copyparty/web/msg.css
+++ b/copyparty/web/msg.css
@@ -1,3 +1,8 @@
+:root {
+	--font-main: sans-serif;
+	--font-serif: serif;
+	--font-mono: 'scp';
+}
 html,body,tr,th,td,#files,a {
 	color: inherit;
 	background: none;
@@ -10,6 +15,7 @@ html {
 	color: #ccc;
 	background: #333;
 	font-family: sans-serif;
+	font-family: var(--font-main), sans-serif;
 	text-shadow: 1px 1px 0px #000;
 	touch-action: manipulation;
 }
@@ -23,6 +29,7 @@ html, body {
 }
 pre {
 	font-family: monospace, monospace;
+	font-family: var(--font-mono), monospace, monospace;
 }
 a {
 	color: #fc5;
diff --git a/copyparty/web/msg.html b/copyparty/web/msg.html
index 4ef5973a..910bc3ae 100644
--- a/copyparty/web/msg.html
+++ b/copyparty/web/msg.html
@@ -7,8 +7,8 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.8">
 	<meta name="theme-color" content="#333">
-{{ html_head }}
 	<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/msg.css?_={{ ts }}">
+{{ html_head }}
 </head>
 
 <body>
diff --git a/copyparty/web/splash.css b/copyparty/web/splash.css
index c6b8b5b7..5ca37f9c 100644
--- a/copyparty/web/splash.css
+++ b/copyparty/web/splash.css
@@ -2,6 +2,7 @@ html {
 	color: #333;
 	background: #f7f7f7;
 	font-family: sans-serif;
+	font-family: var(--font-main), sans-serif;
 	touch-action: manipulation;
 }
 #wrap {
@@ -127,6 +128,7 @@ pre, code {
 	color: #480;
 	background: #fff;
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 	border: 1px solid rgba(128,128,128,0.3);
 	border-radius: .2em;
 	padding: .15em .2em;
diff --git a/copyparty/web/splash.html b/copyparty/web/splash.html
index 79391610..73bb6d87 100644
--- a/copyparty/web/splash.html
+++ b/copyparty/web/splash.html
@@ -7,9 +7,9 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.8">
 	<meta name="theme-color" content="#333">
-{{ html_head }}
 	<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/splash.css?_={{ ts }}">
 	<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
+{{ html_head }}
 </head>
 
 <body>
diff --git a/copyparty/web/svcs.html b/copyparty/web/svcs.html
index 49ca9a02..b560b379 100644
--- a/copyparty/web/svcs.html
+++ b/copyparty/web/svcs.html
@@ -7,10 +7,10 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=0.8">
 	<meta name="theme-color" content="#333">
-{{ html_head }}
 	<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/splash.css?_={{ ts }}">
 	<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
 	<style>ul{padding-left:1.3em}li{margin:.4em 0}</style>
+{{ html_head }}
 </head>
 
 <body>
diff --git a/copyparty/web/ui.css b/copyparty/web/ui.css
index ffed63e3..eecfc7cf 100644
--- a/copyparty/web/ui.css
+++ b/copyparty/web/ui.css
@@ -1,4 +1,8 @@
 :root {
+	--font-main: sans-serif;
+	--font-serif: serif;
+	--font-mono: 'scp';
+
 	--fg: #ccc;
 	--fg-max: #fff;
 	--bg-u2: #2b2b2b;
@@ -378,6 +382,7 @@ html.y textarea:focus {
 .mdo code,
 .mdo tt {
 	font-family: 'scp', monospace, monospace;
+	font-family: var(--font-mono), 'scp', monospace, monospace;
 	white-space: pre-wrap;
 	word-break: break-all;
 }
@@ -447,6 +452,7 @@ html.y textarea:focus {
 }
 .mdo blockquote {
 	font-family: serif;
+	font-family: var(--font-serif), serif;
 	background: #f7f7f7;
 	border: .07em dashed #ccc;
 	padding: 0 2em;
diff --git a/docs/rice/README.md b/docs/rice/README.md
new file mode 100644
index 00000000..a4943f2a
--- /dev/null
+++ b/docs/rice/README.md
@@ -0,0 +1,25 @@
+# custom fonts
+
+to change the fonts in the web-UI,  first create a css file with your customizations, for example `customfonts.css`, for example in your webroot
+
+add this to your copyparty config so the css file gets loaded: `--html-head='<link rel="stylesheet" href="/customfonts.css">'`
+
+make your changes in the css file; this is the default values to get you started:
+
+```css
+:root {
+	--font-main: sans-serif;
+	--font-serif: serif;
+	--font-mono: 'scp';
+}
+```
+
+if you are introducing a new ttf/woff font, don't forget to declare the font itself in the css file; here's one of the default fonts from `ui.css`:
+
+```css
+@font-face {
+	font-family: 'scp';
+	font-display: swap;
+	src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(deps/scp.woff2) format('woff2');
+}
+```