Don't prefer STIXGeneral over the default font (#9711)

* Don't prefer STIXGeneral over the default font

STIXGeneral contains some glyphs for non-LGC scripts, but often doesn't implement these scripts fully. We should always try the browser's default fonts, which are likely to look nicer and have broader script support, before falling back to STIXGeneral.

* Explain why STIXGeneral shouldn't have precedence

* Add a regression test

.github/workflows/cypress.yaml

@@ -92,6 +92,12 @@ jobs:
             #      # Run 4 instances in Parallel
             #      runner: [1, 2, 3, 4]
         steps:
+            - uses: tecolicom/actions-use-apt-tools@v1
+              with:
+                  # Our test suite includes some screenshot tests with unusual diacritics, which are
+                  # supposed to be covered by STIXGeneral.
+                  tools: fonts-stix
+
             - uses: actions/checkout@v3
               with:
                   # XXX: We're checking out untrusted code in a secure context

cypress/e2e/polls/polls.spec.ts

@@ -115,7 +115,10 @@ describe("Polls", () => {
 
         const pollParams = {
             title: "Does the polls feature work?",
-            options: ["Yes", "No", "Maybe"],
+            // Since we're going to take a screenshot anyways, we include some
+            // non-ASCII characters here to stress test the app's font config
+            // while we're at it.
+            options: ["Yes", "Noo⃐o⃑o⃩o⃪o⃫o⃬o⃭o⃮o⃯", "のらねこ Maybe?"],
         };
         createPoll(pollParams);
 

res/themes/legacy-light/css/_legacy-light.pcss

@@ -4,17 +4,20 @@
    Arial empirically gets it right, hence prioritising Arial here.
    We also include STIXGeneral explicitly to support a wider range
    of combining diacritics (Chrome fails without it, as per
-   https://bugs.chromium.org/p/chromium/issues/detail?id=1328898) */
+   https://bugs.chromium.org/p/chromium/issues/detail?id=1328898).
+   We should never actively *prefer* STIXGeneral over the default font though,
+   since it looks pretty rough and implements some non-LGC scripts only
+   partially, making, for example, Japanese text look patchy and sad. */
 /* We fall through to Twemoji for emoji rather than falling through
    to native Emoji fonts (if any) to ensure cross-browser consistency */
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "STIXGeneral", "Arial", "Helvetica",
-    sans-serif, "Noto Color Emoji";
+$font-family: "Nunito", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
+    "STIXGeneral", "Noto Color Emoji";
 
-$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "STIXGeneral", "Courier",
-    monospace, "Noto Color Emoji";
+$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
+    "STIXGeneral", "Noto Color Emoji";
 
 /* unified palette */
 /* try to use these colors when possible */

res/themes/light/css/_light.pcss

@@ -4,17 +4,20 @@
    Arial empirically gets it right, hence prioritising Arial here.
    We also include STIXGeneral explicitly to support a wider range
    of combining diacritics (Chrome fails without it, as per
-   https://bugs.chromium.org/p/chromium/issues/detail?id=1328898) */
+   https://bugs.chromium.org/p/chromium/issues/detail?id=1328898).
+   We should never actively *prefer* STIXGeneral over the default font though,
+   since it looks pretty rough and implements some non-LGC scripts only
+   partially, making, for example, Japanese text look patchy and sad. */
 /* We fall through to Twemoji for emoji rather than falling through
    to native Emoji fonts (if any) to ensure cross-browser consistency */
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "STIXGeneral", "Arial", "Helvetica", sans-serif,
+$font-family: "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, "STIXGeneral",
     "Noto Color Emoji";
 
-$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "STIXGeneral", "Courier",
-    monospace, "Noto Color Emoji";
+$monospace-font-family: "Inconsolata", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace,
+    "STIXGeneral", "Noto Color Emoji";
 
 /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */
 /* ******************** */