diff --git a/.github/workflows/cypress.yaml b/.github/workflows/cypress.yaml index 59e904ee0e9..5f71523fa19 100644 --- a/.github/workflows/cypress.yaml +++ b/.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 diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts index ce0962410c7..c092d4f6478 100644 --- a/cypress/e2e/polls/polls.spec.ts +++ b/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); diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index 41a41185768..ae52b078a72 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/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 */ diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index 0b016e9c8d8..4a1ae7e53a8 100644 --- a/res/themes/light/css/_light.pcss +++ b/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 */ /* ******************** */