Update system font stack value for compatibility. Fix #7724 (#7972)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

- `-apple-system, BlinkMacSystemFont` - These are used to target modern iOS Safari, macOS Safari, macOS Firefox and macOS Chrome's system fonts. 
- ` 'Segoe UI',  system-ui,` - These fonts target windows machines on Windows 7+ [reference](https://markdotto.com/2018/02/07/github-system-fonts/#the-stack). Having system-ui placed after Segoe UI allowed Segoe UI to take precedence when used on Windows machines set to Chinese ( Simplified ) language. There are some known language issues around `system-ui` being used: [This github article](https://infinnie.github.io/blog/2017/systemui.html). However, the purpose of `system-ui` [(reference here)](https://drafts.csswg.org/css-fonts-4/#valdef-font-family-system-ui) is to allow web content to integrate with the look and feel of the native OS. Which makes this font-family a good choice for other devices _if_ the problem is solved by putting Segoe UI first. 
- `Roboto,` - This is our fallback font for androids devices. Having Segoe set before this allows windows to use its system default font even if you have installed Roboto for development reasons. 
- `Helvetica Neue,` - This is a fallback for older macOS
- `Arial` - Using this to catch any of the very old Windows versions (shoutout windows 95)
- `sans-serif` - Our last resort to get a font without serifs
- `  'Apple Color Emoji',  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';` - All the emoji's for the OS's mentioned above. 😁

CHANGELOG.txt

@@ -8,6 +8,7 @@ Changelog
  * Major updates to frontend tooling; move Node tooling from Gulp to Webpack, upgrade to Node v16 and npm v8, eslint v8, stylelint v14 and others (Thibaud Colas)
  * Change comment headers’ date formatting to use browser APIs instead of requiring a library (LB (Ben Johnston))
  * Lint with flake8-comprehensions and flake8-assertive (Mads Jensen)
+ * Switch the Wagtail branding font to a system font stack (Steven Steinwand)
 
 
 2.16.1 (11.02.2022)

client/scss/settings/_variables.scss

@@ -105,8 +105,28 @@ $system-color-link-text: LinkText;
 $system-color-button-text: ButtonText;
 
 // Fonts
-$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
-  sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+// 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,
+  // macOS Chrome
+  BlinkMacSystemFont,
+  // Windows - for all browsers on Windows 7+ (putting Segoe UI before system-ui ensures Segoe UI will be rendered for different languages)
+  'Segoe UI',
+  system-ui,
+  // Targets Android and newer Chrome OS'. (If Roboto is installed on your windows computer Segoe UI will take precedence.)
+  Roboto,
+  // A common fallback font for older macOS'
+  'Helvetica Neue',
+  // Very old Windows versions (special shout-out to whoever is using windows 95)
+  Arial,
+  // A last resort if all else fails, just give us something without serifs :)
+  sans-serif,
+  // 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;
 

docs/releases/2.17.md

@@ -8,6 +8,11 @@
 
 ## What's new
 
+### Page editor redesign
+
+Here are other changes related to the redesign:
+
+ * Switch the Wagtail branding font to a system font stack (Steven Steinwand)
 
 ### Other features