LotusGuild/cinny
3
0
Fork 0
Code Issues 27 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Inter hasn't been used since May: CSS asks for 'InterVariable' but @fontsource-variable/inter 5 names it 'Inter Variable' (app renders in the system fallback font) #320

New Issue
Closed
opened 2026-10-05 16:32:15 -04:00 by jared · 0 comments
jared commented 2026-10-05 16:32:15 -04:00
Owner
Copy Link
Copy Source

61a1f008 (2026-05-21, "replace @fontsource/inter with @fontsource-variable/inter 5") changed the font package. The old @fontsource/inter 4.x variable CSS registered the family InterVariable. @fontsource-variable/inter 5.2.8 registers Inter Variable (node_modules/@fontsource-variable/inter/index.css: font-family: 'Inter Variable'). The app still asks for the old name:

  • src/index.css:45,69: --font-secondary: 'InterVariable', …, sans-serif;
  • src/app/pages/App.tsx:51: inter: \'InterVariable', ${EMOJI_FONTS}, sans-serif``

Measured on prod (chat.lotusguild.org, Chromium):

computed body font:   InterVariable, TwemojiFlags_DISABLED, Twemoji_DISABLED, sans-serif
document.fonts:       Inter Variable: unloaded (all faces)
CDP platform fonts:   heading → Liberation Sans

The Linux desktop app (WebKitGTK) is the same: all Inter faces "unloaded", text in DejaVu Sans. So since May every user sees their platform's default sans-serif: Arial on Windows Chrome, Helvetica on macOS, DejaVu or Liberation on Linux. The design, spacing and truncation were tuned for Inter. The "Inter" choice in Settings → Appearance → font does nothing either.

Fix: use 'Inter Variable' in both places. Optionally keep 'InterVariable' as a second name for anyone with the old font installed locally. Add a Playwright check that document.fonts.check('16px "Inter Variable"') is true after load, or that CSS.getPlatformFontsForNode reports Inter.

Related, Linux desktop: with Twemoji off (the default, Twemoji_DISABLED), the stack has no colour-emoji font, so WebKitGTK falls back through fontconfig. That picks DejaVu Sans's monochrome outline glyphs for older emoji, while newer ones come from Noto Color Emoji. The emoji board and messages then mix black-and-white and colour emoji (screenshot, Linux desktop nightly on a DejaVu + Noto Color Emoji system, which is the default on Ubuntu and Debian). Chromium prefers colour glyphs for emoji presentation, so the web app is unaffected. Fix: when Twemoji is off, add 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji' before sans-serif in --font-emoji/EMOJI_FONTS.

Screenshot

desktop-emoji-mixed.png

Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny 30e2dbcd, cinny-desktop 8f67ec7, element-call 3b0050e8.

61a1f008 (2026-05-21, "replace @fontsource/inter with @fontsource-variable/inter 5") changed the font package. The old `@fontsource/inter` 4.x variable CSS registered the family **`InterVariable`**. `@fontsource-variable/inter` 5.2.8 registers **`Inter Variable`** (`node_modules/@fontsource-variable/inter/index.css`: `font-family: 'Inter Variable'`). The app still asks for the old name: - `src/index.css:45,69`: `--font-secondary: 'InterVariable', …, sans-serif;` - `src/app/pages/App.tsx:51`: `inter: \`'InterVariable', ${EMOJI_FONTS}, sans-serif\`` **Measured on prod** (chat.lotusguild.org, Chromium): ``` computed body font: InterVariable, TwemojiFlags_DISABLED, Twemoji_DISABLED, sans-serif document.fonts: Inter Variable: unloaded (all faces) CDP platform fonts: heading → Liberation Sans ``` The Linux desktop app (WebKitGTK) is the same: all Inter faces "unloaded", text in DejaVu Sans. So since May every user sees their platform's default sans-serif: Arial on Windows Chrome, Helvetica on macOS, DejaVu or Liberation on Linux. The design, spacing and truncation were tuned for Inter. The "Inter" choice in Settings → Appearance → font does nothing either. **Fix:** use `'Inter Variable'` in both places. Optionally keep `'InterVariable'` as a second name for anyone with the old font installed locally. Add a Playwright check that `document.fonts.check('16px "Inter Variable"')` is true after load, or that `CSS.getPlatformFontsForNode` reports Inter. **Related, Linux desktop:** with Twemoji off (the default, `Twemoji_DISABLED`), the stack has no colour-emoji font, so WebKitGTK falls back through fontconfig. That picks **DejaVu Sans's monochrome outline glyphs** for older emoji, while newer ones come from Noto Color Emoji. The emoji board and messages then mix black-and-white and colour emoji (screenshot, Linux desktop nightly on a DejaVu + Noto Color Emoji system, which is the default on Ubuntu and Debian). Chromium prefers colour glyphs for emoji presentation, so the web app is unaffected. Fix: when Twemoji is off, add `'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji'` before `sans-serif` in `--font-emoji`/`EMOJI_FONTS`. **Screenshot** ![desktop-emoji-mixed.png](https://code.lotusguild.org/attachments/1fbbf3a3-8e8a-451b-ab64-95faeb556402) --- _Found in the October 2026 client audit (Playwright against a local Synapse + LiveKit stack, plus code reading). Code refs are at cinny `30e2dbcd`, cinny-desktop `8f67ec7`, element-call `3b0050e8`._
desktop-emoji-mixed.png
30 KiB
jared added the bugpriority: mediumarea: appearance labels 2026-10-05 16:32:15 -04:00
jared closed this issue 2026-10-17 17:51:27 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
a11y
Accessibility: keyboard, screen reader, contrast, motion
 area: appearance
Client area: appearance
 area: auth-session
Client area: auth-session
 area: build-ci
Client area: build-ci
 area: calls
Client area: calls
 area: desktop
Client area: desktop
 area: media
Client area: media
 area: messaging
Client area: messaging
 area: mobile
Client area: mobile
 area: moderation
Client area: moderation
 area: navigation
Client area: navigation
 area: notifications
Client area: notifications
 area: settings
Client area: settings
 area: threads
Client area: threads
 bug
Something is not working
 dependencies
Third-party package versions and advisories
 docs
README / LOTUS_* docs wrong or missing
 duplicate
This issue or pull request already exists
 enhancement
New feature
 help wanted
Need some help
 invalid
Something is wrong
 needs-human-review
performance
Re-render storms, leaks, heavy work on hot paths
 planning
priority: critical
Data loss, security hole, or crash on a main path
 priority: high
Broken feature or serious usability problem
 priority: low
Minor issue or polish
 priority: medium
Wrong behaviour in an edge case or notable degradation
 qa
Manual QA: shipped, needs a human in a real environment
 question
More information is needed
 research
security
XSS, unsafe URLs, data leaks, auth/session
 tech-debt
Code health, dead code, fragile patterns
 ux
Usability or visual inconsistency
 wontfix
This won't be fixed
No labels area: appearance bug priority: medium
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
cole (Cole Keller) jared (Jared Vititoe) nathan (Nathan Vititoe)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#320