fix(styles, internet-header): Replaced system-ui fallback font with l…

…ist of fonts (#2735)

The list is based on:

- https://phabricator.wikimedia.org/T175877
- https://github.com/twbs/bootstrap/pull/22377/files

Also I've tested "Segoe UI" with "Frutiger Neue For Post" and it works
quite good as a fallback font without any changes:
https://meowni.ca/font-style-matcher/

.changeset/purple-clocks-call.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/internet-header': patch
+'@swisspost/design-system-styles': patch
+---
+
+Replaced `system-ui` fallback font with a list of fallbacks to avoid rendering issues with specific writing system (chinese, arabic…).

packages/internet-header/src/styles.scss

@@ -1,4 +1,5 @@
 @use '@swisspost/design-system-styles/basics';
+@use '@swisspost/design-system-styles/variables/type';
 
 body,
 h1,
@@ -7,7 +8,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Frutiger Neue for Post', system-ui, sans-serif !important;
+  font-family: type.$font-family-sans-serif !important;
 }
 
 // For imported auto-generated readme files into .mdx documentations

packages/styles/src/variables/_type.scss

@@ -10,7 +10,15 @@
 //
 // Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif: 'Frutiger Neue For Post', system-ui, sans-serif !default;
+$font-family-sans-serif:
+  'Frutiger Neue For Post',
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  sans-serif !default;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
   monospace !default;
 $font-family-base: $font-family-sans-serif !default;