From 4ee1465acfd14ab633364b5581d1e9213d946686 Mon Sep 17 00:00:00 2001 From: Erik Faye-Lund Date: Wed, 21 Jul 2021 09:45:51 +0200 Subject: [PATCH] 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. --- scss/_variables.scss | 2 +- site/content/docs/5.1/content/reboot.md | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index ccc925837a..56a81be7fd 100644 --- 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 bed4f599eb..033d5ea95b 100644 --- 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