Prefer Linux-specific fonts over Arial

Some Linux distributions (like Debian) have fontconfig aliases for Arial
that picks specific fonts. But such generic aliases might be less
desirable than the known-good Linux specific fonts.

This fixes a problem on my setup where Liberation Sans is aliased as
Arial, even when Noto Sans is available. Liberation Sans doesn't support
a weight of 500, so we end up rendering headers at the normal weight of
400, which makes them stand out less. Reordering the Arial fallback
makes us instead pick Noto Sans over Lieration Sans, which does support
a weight of 500, and makes headers stand out again.

While we're at it, fixup the reboot documentation to match, and change
the comment about Helvetica Neue; that's not a "Basic web-fallback" font,
it's the UI font on older iOS and macOS versions.

diff --git a/scss/_variables.scss b/scss/_variables.scss
index ccc925837ae6dfbca867a54b20c55062963c6eaf..56a81be7fd42ff75a7fedeb19f4a3999249c530b 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -534,7 +534,7 @@ $aspect-ratios: (
 
 // scss-docs-start font-variables
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
 $font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;

diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md
index bed4f599eb9d84202ff7fde613947762b3bf6d4f..033d5ea95be76a1dc308592f3888ec7f606d5a9d 100644 (file)
--- a/site/content/docs/5.1/content/reboot.md
+++ b/site/content/docs/5.1/content/reboot.md
@@ -63,11 +63,13 @@ $font-family-sans-serif:
   "Segoe UI",
   // Android
   Roboto,
-  // Basic web fallback
-  "Helvetica Neue", Arial,
+  // older macOS and iOS
+  "Helvetica Neue"
   // Linux
   "Noto Sans",
   "Liberation Sans",
+  // Basic web fallback
+  Arial,
   // Sans serif fallback
   sans-serif,
   // Emoji fonts