Page MenuHomePhorge

Added cross-platform default fonts
Needs ReviewPublic

Authored by vedranmiletic on Sep 22 2021, 23:00.
Tags
None
Referenced Files
F185244: D25021.id279.diff
Sun, Oct 2, 16:28
Unknown Object (File)
Sat, Oct 1, 06:35
Unknown Object (File)
Sat, Oct 1, 06:35
Unknown Object (File)
Sat, Oct 1, 06:34
Unknown Object (File)
Fri, Sep 30, 23:25
Unknown Object (File)
Fri, Sep 30, 01:33
F184455: Screen Shot 2022-09-29 at 5.33.06 PM.png
Thu, Sep 29, 23:37
F184453: Screen Shot 2022-09-29 at 5.33.01 PM.png
Thu, Sep 29, 23:37

Details

Summary

system-ui is provided by modern browsers as a cross-platform default font. Using this font was a controversial choice back in 2017. because it did not address i18n well and therefore it was removed from Bootstrap twbs/bootstrap#22377. However, it was added back in Bootstrap v5 twbs/bootstrap#30561 since it got better over time.

Fixes T15049.

Test Plan

Tested locally for now.

Diff Detail

Repository
rP Phorge
Branch
arcpatch-D25021
Lint
Lint Passed
Unit
Tests Passed
Build Status
Buildable 88
Build 88: arc lint + arc unit

Event Timeline

vedranmiletic retitled this revision from Remove variants of Segoe UI except default from fonts list and add more useful defaults to Added cross-platform default fonts.
vedranmiletic edited the summary of this revision. (Show Details)

This revision only adds cross-platform default fonts and doesn't remove any of the existing ones.

Could you describe in more detail what this change is doing? - Because I am not familiar with celerity, I did read through https://secure.phabricator.com/book/phabdev/article/celerity/ for some background.

And specifically, does this impact any other browsers other than the one you mentioned having an issue? (e.g. Will this revision change any fonts on any other platforms where this problem does not exist?)

Apologies for the late response, my open source work has been on the sidelines for some time.

Could you describe in more detail what this change is doing? - Because I am not familiar with celerity, I did read through https://secure.phabricator.com/book/phabdev/article/celerity/ for some background.

Celerity is automatically regenerated when files are changed. The important changes are in the other files.

And specifically, does this impact any other browsers other than the one you mentioned having an issue? (e.g. Will this revision change any fonts on any other platforms where this problem does not exist?)

The idea here is, instead of picking arbitrary fonts, is to go for the platform recommendations (basically what Bootstrap is doing) while only minimally changin the set of existing fonts used. Let's go one by one:

  • -apple-system - Apple's system font
  • system-ui - cross-platform and cross-browser standard for specifying the system font, supported by modern browsers, selects Segoe UI on Windows and whatver font you use on Linux (DejaVu Sans, Ubuntu, Fira Sans)
  • BlinkMacSystemFont - older specification for system font on Mac, doesn't exist on other platforms
  • 'Segoe UI' etc. - if Windows browser you use doesn't know about system-ui

This seems sensible to me, FWIW

avivey added a subscriber: avivey.

I've re-applied this patch and uploaded with arc diff, just to normalize it.

I've ran this locally, and it looks the same to me (Chrome on Windows).

Can someone with a Mac check that it looks ok?

Also, @vedranmiletic - why did you choose -apple-system before system-ui?

I use Edge on Windows 11 with the browser font set to Segoe UI and it shows me that font.
The Ubuntu font is not used and looks to me terrible.

Looks good on my Mac. Screenshots attached.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:107.0) Gecko/20100101 Firefox/107.0 ID:20220929093914

Screen Shot 2022-09-29 at 5.34.13 PM.png (1×2 px, 625 KB)

Screen Shot 2022-09-29 at 5.34.18 PM.png (1×2 px, 756 KB)

Chrome Version 105.0.5195.125 (Official Build) (x86_64)

Screen Shot 2022-09-29 at 5.32.31 PM.png (1×2 px, 496 KB)

Screen Shot 2022-09-29 at 5.32.41 PM.png (1×2 px, 615 KB)

Safari Version 16.0 (17614.1.25.9.10, 17614)

Screen Shot 2022-09-29 at 5.33.01 PM.png (1×2 px, 247 KB)

Screen Shot 2022-09-29 at 5.33.06 PM.png (1×2 px, 362 KB)