phanpy icon indicating copy to clipboard operation
phanpy copied to clipboard

Phanpy uses Safari-only 'ui-rounded' and 'ui-monospace' instead of 'system-ui' or 'monospace'

Open irasponsible opened this issue 1 year ago • 0 comments

Site, Version, Instance

phanpy.social 2024.11.22.8f048af eldritch.cafe

Browser

Firefox 133.0 (64-bit) / Linux 6.11.10-300.fc41.x86_64

Bug description

The current font declaraton in Phanpy's CSS is

font-family: ui-rounded, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;

Which means that unless your browser supports ui-rounded (which is Safari-only), you get a random font instead what appears to be intended, the system-ui font.

As it stands, because I have Segoe UI installed, that's the font I get, even though my system-ui and sans-serif fonts are Inter Variable.

The same issue occurs with the monospace font

--monospace-font: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

Where Consolas ends up used, instead of the system and browser monospaced font Commit Mono.

To reproduce

  1. Open Phanpy in Firefox or a Non-Safari browser
  2. Use developer tools to see which font has been used

Expected behavior

Phanpy should use either the system ui font (system-ui) or the system sans-serif font (sans-serif).

This could be accomplished by replacing the current font declaration with font-family: ui-rounded, system-ui, sans-serif; and font-family: ui-monospace, monospace;

Other

No response

irasponsible avatar Dec 04 '24 00:12 irasponsible