add Monospace system UI font stack

resolves #8043

ui-monospace, Menlo, Monaco, ... "Courier New", monospace

Operating Systems and their fonts:
ui-monospace -> MacOS (Menlo, Monaco fallback)
Cascadia  ->Windows (since Vista)
Roboto -> Android (since 4.0)
Fira -> Firefox OS
Droid -> Android (<4.0)
Oxygen -> KDE
Ubuntu -> Ubuntu
In addition, ui-monospace is supported for Safari/MacOS (only way to access SF Mono in Mac);

Cascadia is a new Microsoft font-face, and Segue is the fallback.

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)

CONTRIBUTORS.rst

@@ -590,6 +590,7 @@ Contributors
 * Onno Timmerman
 * Kyle J. Roux
 * Vaibhav Shukla
+* Rishank Kanaparti
 
 Translators
 ===========

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 {

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;
 

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,

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)
 

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;
 }