cheeaun / cheeaun/phanpy

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

Open
#965 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
1.5k
Forks
186
Avg merge
1d 36m
Merged PRs (30d)
11

Description

### 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

```css
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](https://caniuse.com/extended-system-fonts)), 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
```css
--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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.