diff --git a/public/503.html b/public/503.html
index 119c710ab7..68c9386146 100644
--- a/public/503.html
+++ b/public/503.html
@@ -1,13 +1,13 @@
 <html>
 <head>
 	<title>Excessive Load Warning</title>
-	<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<style type="text/css">
 	body {
 		background: #00A9EA;
 		color: white;
-		font-family: 'Ubuntu', sans-serif;
+		/* see public/less/admin/vars.less for documentation on system font family */
+		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 		text-align: center;
 		-webkit-transform-style: preserve-3d;
 		-moz-transform-style: preserve-3d;
diff --git a/public/less/admin/paper/bootswatch.less b/public/less/admin/paper/bootswatch.less
index 36957a3092..024e48970b 100644
--- a/public/less/admin/paper/bootswatch.less
+++ b/public/less/admin/paper/bootswatch.less
@@ -2,8 +2,6 @@
 // Bootswatch
 // -----------------------------------------------------
 
-@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
-
 // Navbar =====================================================================
 
 .navbar {
diff --git a/public/less/admin/vars.less b/public/less/admin/vars.less
index 8e7bc2bb30..e888af0b96 100644
--- a/public/less/admin/vars.less
+++ b/public/less/admin/vars.less
@@ -1,3 +1,23 @@
 @acp-base-line: 8px;
 @acp-line-height: @acp-base-line * 6;
-@acp-margin: @acp-base-line * 2;
\ No newline at end of file
+@acp-margin: @acp-base-line * 2;
+// system font family
+// based on those in [bootstrap@5.0.0-alpha1](https://github.com/twbs/bootstrap/blob/b531bda07cbea2e124194aefe3b8597b3ac2578e/scss/_variables.scss#L386)
+// and [wordpress admin](https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/common.css?rev=47835#L220)
+//   system-ui                           : supported by the latest browsers for this very purpose
+//   apple-system, BlinkMacSystemFont    : iOS and MacOS
+//   "Segoe UI"                          : Windows Vista, 7, 8, 10
+//   Roboto                              : Android 4.0+
+//   Oxygen-Sans                         : KDE
+//   Ubuntu                              : Ubuntu
+//   Cantarell                           : GNOME
+//   "Helvetica Neue"                    : Mac OS X
+//   Helvetica                           : backup, better looking than Arial
+//   Arial                               : backup
+//   "Noto Sans"                         : broader language support on Android
+//   sans-serif                          : whatever the browser can give us
+//   "Apple Color Emoji"                 : Emoji on iOS and MacOS
+//   "Segoe UI Emoji", "Segoe UI Symbol" : Emoji on Windows
+//   "Noto Color Emoji"                  : Emoji on Android
+@font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+@font-family-sans-serif: @font-family-system;
diff --git a/public/less/install.less b/public/less/install.less
index a9f59dbb7b..ffd98e9f30 100644
--- a/public/less/install.less
+++ b/public/less/install.less
@@ -1,3 +1,5 @@
+@import "./admin/vars";
+
 .working {
   width: 24px;
   height: 24px;
@@ -53,7 +55,7 @@
 }
 
 body, small, p, div {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+	font-family: @font-family-sans-serif;
 }
 
 .input-row {
diff --git a/public/vendor/redoc/index.html b/public/vendor/redoc/index.html
index 342866d600..f3fa0dd0a2 100644
--- a/public/vendor/redoc/index.html
+++ b/public/vendor/redoc/index.html
@@ -5,7 +5,6 @@
     <!-- needed for adaptive design -->
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
 
     <!--
     ReDoc doesn't change outer page styles
diff --git a/test/files/503.html b/test/files/503.html
index 119c710ab7..68c9386146 100644
--- a/test/files/503.html
+++ b/test/files/503.html
@@ -1,13 +1,13 @@
 <html>
 <head>
 	<title>Excessive Load Warning</title>
-	<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<style type="text/css">
 	body {
 		background: #00A9EA;
 		color: white;
-		font-family: 'Ubuntu', sans-serif;
+		/* see public/less/admin/vars.less for documentation on system font family */
+		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 		text-align: center;
 		-webkit-transform-style: preserve-3d;
 		-moz-transform-style: preserve-3d;
