Add correct custom property font usage to the userbar. Fix #9290 (#9314)

moved hardcoded font to userbar.scss file

CHANGELOG.txt

@@ -58,6 +58,7 @@ Changelog
  * Fix: Adjust spacing of fields’ error messages and position in tables (Steven Steinwand)
  * Fix: Update dead or redirected links throughout the documentation (LB (Ben) Johnston)
  * Fix: Use different icons for workflow timeline component, so the steps can be distinguished with other means than color (Sam Moran)
+ * Fix: Use the correct custom font for the Wagtail userbar (Umar Farouk Yunusa)
 
 4.0.3 (xx.xx.xxxx) - IN DEVELOPMENT
 ~~~~~~~~~~~~~~~~~~
@@ -66,6 +67,7 @@ Changelog
 * Update special-purpose `FieldPanel` deprecation message to add clarity for developers (Matt Westcott)
 * Fix: Add back rendering of `help_text` for InlinePanel (Matt Westcott)
 * Fix: Ensure that `AbstractForm` & `AbstractEmailForm` page models correctly pass the form to the preview context (Dan Bentley)
+* Fix: Use the correct custom font for the Wagtail userbar (Umar Farouk Yunusa)
 
 4.0.2 (23.09.2022)
 ~~~~~~~~~~~~~~~~~~

CONTRIBUTORS.rst

@@ -635,6 +635,7 @@ Contributors
 * Albina Starykova
 * Sam Moran
 * Toyibat Adele
+* Umar Farouk Yunusa
 
 
 Translators

docs/releases/4.1.md

@@ -83,6 +83,7 @@ This feature was developed by Karl Hobley and Matt Westcott.
  * Adjust spacing of fields’ error messages and position in tables (Steven Steinwand)
  * Update dead or redirected links throughout the documentation (LB (Ben) Johnston)
  * Use different icons for workflow timeline component, so the steps can be distinguished with other means than color (Sam Moran)
+ * Use the correct custom font for the Wagtail userbar (Umar Farouk Yunusa)
 
 ## Upgrade considerations
 

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@@ -52,6 +52,10 @@ $positions: (
 // =============================================================================
 .#{$namespace}-userbar-reset {
   all: initial;
+  // Copy our font sans variable so it can be used without Tailwind.
+  --w-font-sans: -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';
 }
 
 .#{$namespace}-userbar {