From 441255f61d34dfe65c368855ce9f6f4db47151b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 6 Mar 2024 12:42:33 +0100
Subject: [PATCH] fix(styles, internet-header): Replaced system-ui fallback
 font with list 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         |  6 ++++++
 packages/internet-header/src/styles.scss |  3 ++-
 packages/styles/src/variables/_type.scss | 10 +++++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/purple-clocks-call.md

diff --git a/.changeset/purple-clocks-call.md b/.changeset/purple-clocks-call.md
new file mode 100644
index 0000000000..b6c74594ad
--- /dev/null
+++ b/.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…).
diff --git a/packages/internet-header/src/styles.scss b/packages/internet-header/src/styles.scss
index a443a8d143..98d541b551 100644
--- a/packages/internet-header/src/styles.scss
+++ b/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
diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
index 81f3a265dd..27f3e79694 100644
--- a/packages/styles/src/variables/_type.scss
+++ b/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;