diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss
index 7a86b805a9..b352ff3034 100644
--- a/assets/stylesheets/global/_variables.scss
+++ b/assets/stylesheets/global/_variables.scss
@@ -2,12 +2,12 @@
 @use 'global/variables-dark';
 
 // Variables needed to style the error message for browsers that don't support CSS variables.
-$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
+$baseFont: system-ui, sans-serif;
 $textColor: #333;
 
 html {
   --baseFont: #{$baseFont};
-  --monoFont: 'SF Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --monoFont: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
   --boldFontWeight: 500;
   --bolderFontWeight: 600;