From c88a13d62bb42dc87e35af1efc1677a365c8267d Mon Sep 17 00:00:00 2001
From: Matthias Kestenholz <mk@feinheit.ch>
Date: Fri, 16 Sep 2022 09:56:54 +0200
Subject: [PATCH] Use system font stack in the toolbar

We follow the Django admin's lead, see https://code.djangoproject.com/ticket/33878
---
 .../static/debug_toolbar/css/toolbar.css      | 41 +++++++++++--------
 docs/changes.rst                              |  2 +
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css
index a105bfd11..c70eaf5ed 100644
--- a/debug_toolbar/static/debug_toolbar/css/toolbar.css
+++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css
@@ -76,7 +76,9 @@
     color: #000;
     vertical-align: baseline;
     background-color: transparent;
-    font-family: sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
+        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
+        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     text-align: left;
     text-shadow: none;
     white-space: normal;
@@ -237,13 +239,30 @@
     font-size: 16px;
 }
 
+#djDebug pre,
 #djDebug code {
     display: block;
-    font-family: Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
-        monospace;
+    font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+        "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+        "Fira Mono", "Droid Sans Mono", "Courier New", monospace,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "Noto Color Emoji";
+    overflow: auto;
+}
+
+#djDebug code {
     font-size: 12px;
     white-space: pre;
-    overflow: auto;
+}
+
+#djDebug pre {
+    white-space: pre-wrap;
+    color: #555;
+    border: 1px solid #ccc;
+    border-collapse: collapse;
+    background-color: #fff;
+    padding: 2px 3px;
+    margin-bottom: 3px;
 }
 
 #djDebug .djdt-panelContent {
@@ -562,19 +581,7 @@
 #djDebug .djSQLDetailsDiv {
     margin-top: 0.8em;
 }
-#djDebug pre {
-    white-space: pre-wrap;
-    color: #555;
-    border: 1px solid #ccc;
-    border-collapse: collapse;
-    background-color: #fff;
-    display: block;
-    overflow: auto;
-    padding: 2px 3px;
-    margin-bottom: 3px;
-    font-family: Consolas, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
-        monospace;
-}
+
 #djDebug .djdt-stack span {
     color: #000;
     font-weight: bold;
diff --git a/docs/changes.rst b/docs/changes.rst
index df6be99f2..bd66d7658 100644
--- a/docs/changes.rst
+++ b/docs/changes.rst
@@ -4,6 +4,8 @@ Change log
 Pending
 -------
 
+* The toolbar's font stack now prefers system UI fonts.
+
 3.6.0 (2022-08-17)
 ------------------