microsoft/fluentui

[Bug]: Teams fonts are inconsistent across embedded platforms due to overrides on Teams

Closed this issue · 0 comments

Component

FluentProvider

Environment

Only reproducible in MacOS

Current Behavior

Teams fonts are inconsistent across embedded platforms due to overrides on Teams side.

Teams overrides the base font family to: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif

While at the moment on v9 Teams theme base font family is: "'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif"

This difference is causing visual inconsistencies between Teams and embedded applications that relies on Teams base styles, like 365 Chat for example:

Image

Expected Behavior

Teams fonts should be consistent across all platforms, respecting Teams overrides.

Reproduction

https://teams.microsoft.com/v2/

Steps to reproduce

This can be verified on 365 Chat (Copilot) for example:

Image

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

Teams

Are you willing to submit a PR to fix?

yes

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.