diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 1ea751d314..4a89459dea 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -55,6 +55,7 @@ Changelog
  * Add useful help text to Tag fields to advise what content is allowed inside tags, including when `TAG_SPACES_ALLOWED` is `True` or `False` (Abdulmajeed Isa)
  * Change `AbstractFormSubmission`'s `form_data` to use JSONField to store form submissions (Jake Howard)
  * Add image duplicate detection on upload (Tidiane Dia, with sponsorship from The Motley Fool)
+ * Add a system font stack for monospace fonts (Rishank Kanaparti)
  * Fix: When using `simple_translations` ensure that the user is redirected to the page edit view when submitting for a single locale (Mitchel Cabuloy)
  * Fix: When previewing unsaved changes to `Form` pages, ensure that all added fields are correctly shown in the preview (Joshua Munn)
  * Fix: When Documents (e.g. PDFs) have been configured to be served inline via `WAGTAILDOCS_CONTENT_TYPES` & `WAGTAILDOCS_INLINE_CONTENT_TYPES` ensure that the filename is correctly set in the `Content-Disposition` header so that saving the files will use the correct filename (John-Scott Atlakson)
diff --git a/CONTRIBUTORS.rst b/CONTRIBUTORS.rst
index 4815401d72..e9d0284201 100644
--- a/CONTRIBUTORS.rst
+++ b/CONTRIBUTORS.rst
@@ -590,6 +590,7 @@ Contributors
 * Onno Timmerman
 * Kyle J. Roux
 * Vaibhav Shukla
+* Rishank Kanaparti
 
 Translators
 ===========
diff --git a/client/scss/elements/_typography.scss b/client/scss/elements/_typography.scss
index 75b01b4853..a34c3ef29a 100644
--- a/client/scss/elements/_typography.scss
+++ b/client/scss/elements/_typography.scss
@@ -50,6 +50,7 @@ a {
 code {
   box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.2);
   background-color: $color-fieldset-hover;
+  font-family: $font-mono;
   padding: 2px 5px;
 }
 
@@ -61,6 +62,10 @@ kbd {
   padding: 0.3em 0.5em;
 }
 
+pre {
+  font-family: $font-mono;
+}
+
 dl,
 dt,
 dd {
diff --git a/client/scss/settings/_variables.scss b/client/scss/settings/_variables.scss
index 8a94de000f..ee9eeee407 100644
--- a/client/scss/settings/_variables.scss
+++ b/client/scss/settings/_variables.scss
@@ -101,6 +101,7 @@ $system-color-button-text: ButtonText;
 // Fonts
 // Our fonts are based off of a list of system fallbacks to ensure
 // that the most 'up-to-date' and available system font is used and rendered consistently as possible across browsers.
+
 $font-sans:
   // iOS Safari, macOS Safari, macOS Firefox
   -apple-system,
@@ -121,6 +122,26 @@ $font-sans:
   'Apple Color Emoji',
   'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
+$font-mono:
+  // iOS Safari, MacOS Safari
+  ui-monospace, Menlo, Monaco,
+  // Windows
+  'Cascadia Mono',
+  'Segoe UI Mono',
+  // Linux
+  'Roboto Mono',
+  'Oxygen Mono', 'Ubuntu Monospace',
+  // Android
+  'Source Code Pro',
+  // Firefox
+  'Fira Mono',
+  // Last resort Android/others
+  'Droid Sans Mono',
+  'Courier New', monospace,
+  // All the emojis 👋🙂
+  'Apple Color Emoji',
+  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
 // Legacy icon font, to be removed in the near future.
 $font-wagtail-icons: wagtail;
 
diff --git a/client/src/tokens/typography.js b/client/src/tokens/typography.js
index 81ef562916..566416c858 100644
--- a/client/src/tokens/typography.js
+++ b/client/src/tokens/typography.js
@@ -1,6 +1,7 @@
 // Note: Tailwind does not automatically escape font names.
 // If a font name contains an invalid identifier (like a space), we wrap it in quotes to escape the invalid characters.
 // Font stack optimised for built-in fonts of each major operating system, with support for emojis.
+
 const systemUIFontStack = [
   '-apple-system',
   'BlinkMacSystemFont',
@@ -16,7 +17,32 @@ const systemUIFontStack = [
   '"Noto Color Emoji"',
 ];
 
-const monoFontStack = ['monospace', 'serif'];
+const monoFontStack = [
+  // iOS Safari, MacOS Safari
+  'ui-monospace',
+  'Menlo',
+  'Monaco',
+  // Windows,
+  '"Cascadia Mono"',
+  '"Segoe UI Mono"',
+  // Linux
+  '"Roboto Mono"',
+  '"Oxygen Mono"',
+  '"Ubuntu Monospace"',
+  // Android
+  '"Source Code Pro"',
+  // Firefox
+  '"Fira Mono"',
+  // Last resort Android/others
+  '"Droid Sans Mono"',
+  '"Courier New"',
+  'monospace',
+  // All the emojis 👋🙂
+  '"Apple Color Emoji"',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"',
+  '"Noto Color Emoji"',
+];
 
 const fontFamily = {
   sans: systemUIFontStack,
diff --git a/docs/releases/3.0.md b/docs/releases/3.0.md
index 0ae4be08a7..f087782c8f 100644
--- a/docs/releases/3.0.md
+++ b/docs/releases/3.0.md
@@ -16,7 +16,7 @@ This release contains significant UI changes that affect all of Wagtail's admin,
  * Fully remove the legacy sidebar, with slim sidebar replacing it for all users (Thibaud Colas)
  * Add support for adding custom attributes for link menu items in the slim sidebar (Thibaud Colas)
  * Convert all UI code to CSS logical properties for Right-to-Left (RTL) language support (Thibaud Colas)
- * Switch the Wagtail branding font to a system font stack (Steven Steinwand, Paarth Agarwal)
+ * Switch the Wagtail branding font and monospace font to a system font stack (Steven Steinwand, Paarth Agarwal, Rishank Kanaparti)
  * Remove most uppercased text styles from admin UI (Paarth Agarwal)
  * Implement new tabs design across the admin interface (Steven Steinwand)
 
diff --git a/wagtail/admin/static_src/wagtailadmin/css/normalize.css b/wagtail/admin/static_src/wagtailadmin/css/normalize.css
index cb23972e42..b80e3b3644 100644
--- a/wagtail/admin/static_src/wagtailadmin/css/normalize.css
+++ b/wagtail/admin/static_src/wagtailadmin/css/normalize.css
@@ -226,8 +226,6 @@ code,
 kbd,
 pre,
 samp {
-  font-family: monospace, serif;
-  _font-family: 'courier new', monospace;
   font-size: 1em;
 }