diff options
| author | Gaël Poupard <ffoodd@users.noreply.github.com> | 2020-10-22 09:28:19 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-10-22 09:28:19 +0300 |
| commit | 341bd5aa4652fe9be56967ebda71958145ead95c (patch) | |
| tree | 375367abcfbd304d6cd872a16e9e463ca7371d35 /scss/_variables.scss | |
| parent | ebd9eb105ab094af747c09082ced1df71aaec123 (diff) | |
Handle the Ubuntu sans-serif case (#31657)
On Ubuntu, our native font-stack doesn't output the same font on Firefox and Chrome. This is [a known aliasing issue](http://fontfamily.io/sans-serif) — check at the bottom, Ubuntu 14.04. Ubuntu 18.04 (my current) doesn't use the same (Firefox uses Liberation Sans, Chrome uses the default system font Ubuntu).
I'm inclined to prefer Liberation Sans since it's closer to Arial / Helvetica. This patch already exists in Boosted, didn't notice it was missing in bootstrap until today…
BTW, our linked Smashing Magazine's system fonts post mentions this and is even more accurate since it targets the three major Linux distributions. AFAIK this is not needed since [Liberation Sans is available everywhere](http://fontfamily.io/Liberation_Sans) — but we might go back to `Oxygen, Ubuntu, Cantarell`if we want to stick to system fonts.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'scss/_variables.scss')
| -rw-r--r-- | scss/_variables.scss | 2 |
1 files changed, 1 insertions, 1 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index 4c0e04917c..c15ceb68ac 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -393,7 +393,7 @@ $aspect-ratios: ( // Font, line-height, and color for body text, headings, and more. // stylelint-disable value-keyword-case -$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto 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", Arial, "Noto Sans", "Liberation Sans", 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; |