Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement full support for variable fonts #109308

Open
guidezpl opened this issue Aug 10, 2022 · 6 comments
Open

Implement full support for variable fonts #109308

guidezpl opened this issue Aug 10, 2022 · 6 comments
Labels
a: typography Text rendering, possibly libtxt c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list team-framework Owned by Framework team triaged-framework Triaged by Framework team

Comments

@guidezpl
Copy link
Member

guidezpl commented Aug 10, 2022

Breaking this out of a comment by @davelab6 . Flutter now support variable fonts on all platforms (web canvaskit soon), this issue is about improving support to aid in the developer experience.

So, to implement full support for variable fonts, I recommend Flutter have those 4 things:

  • a way to set variable font axes values with inheritance
  • by default, when the opsz axis exists in a font, set the value to the font size, and allow a ratio override, plus override via the above axis value sette. (Ideally the auto value is resolved to physical Points, 1/72nd of an inch, although I am recommending that ideal as a partisan and recognize there are other positions on what value to use; but the key idea is that it is set based on font size)
  • correctly render semi-opaque text
  • correctly render outline-stroked text

Originally posted by @davelab6 in #33709 (comment)

and the following comment:

  • Flutter developers and end users of flutter apps will need a easy way to know what's actually available in each VF family; that's because they will often be constructing UIs for end users to set axes values, as much as they will set axes values within the apps own code itself.

Related issues: #33709

See go/default-opsz.

@guidezpl
Copy link
Member Author

For optical size, the obvious thing to do would be to default to the ambient font size. But does that always work? e.g. if the font size is 5, and the variable font only supports optical sizes 20 to 48, will it clamp the value to 20 or behave in unexpected ways?

@danagbemava-nc danagbemava-nc added in triage Presently being triaged by the triage team c: new feature Nothing broken; request for a new capability framework flutter/packages/flutter repository. See also f: labels. a: typography Text rendering, possibly libtxt c: proposal A detailed proposal for a change to Flutter and removed in triage Presently being triaged by the triage team labels Aug 10, 2022
@goderbauer goderbauer added the P2 Important issues not at the top of the work list label Aug 16, 2022
@davelab6
Copy link

davelab6 commented Sep 1, 2022

@guidezpl it should clamp in the way you describe, and the opsz axis units should match the px units that the font-size resolves to. I'll email you privately with some additional insights into this.

@flutter-triage-bot flutter-triage-bot bot added team-framework Owned by Framework team triaged-framework Triaged by Framework team labels Jul 8, 2023
@wildsylvan
Copy link

see also this: #136779

@wildsylvan
Copy link

wildsylvan commented Apr 21, 2024

and right now if you include a variable font, things like material 3 textThemes which set weights (e.g. titleMedium) don't set the weight using fontVariations, so the weight axis of the variable font is not used. in the case of the medium weight, it gets displayed as a regular weight

repro

Scaffold(
  body: Center(
    child: Row(mainAxisSize: MainAxisSize.min, children: [
      Text(
        "a",
        style: Theme.of(context).textTheme.titleMedium,
      ),
      Text(
        "a",
        style: Theme.of(context).textTheme.titleMedium!.copyWith(
          fontVariations: [const FontVariation('wght', 500)],
        ),
      )
    ]),
  ),
);

image

  fonts:
    - family: Gabarito
      fonts:
        - asset: assets/fonts/Gabarito[wght].ttf

(variable font: Gabarito)

@gnprice
Copy link
Member

gnprice commented May 8, 2024

and right now if you include a variable font, things like material 3 textThemes which set weights (e.g. titleMedium) don't set the weight using fontVariations, so the weight axis of the variable font is not used. in the case of the medium weight, it gets displayed as a regular weight

Interesting report, thanks. So even within the Flutter tree, the Material implementation is using the TextStyle API in a way that gives wrong results with a variable-weight font. That seems like further evidence that it'd be appropriate to adjust that API as part of fixing the problem.

The strategy I describe at #136779 (comment) would fix this by letting fontWeight get interpreted as the font weight, regardless of whether the font offers variable weight. (With wght in fontVariations consulted as a fallback, for compatibility.)

@gnprice
Copy link
Member

gnprice commented May 8, 2024

I've filed #148026 for the proposal I laid out in that linked other issue at #136779 (comment), namely unifying into a single font-weight axis, like what browsers offer via CSS. That would resolve the symptom @wildsylvan reported above with Flutter's Material implementation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a: typography Text rendering, possibly libtxt c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter framework flutter/packages/flutter repository. See also f: labels. P2 Important issues not at the top of the work list team-framework Owned by Framework team triaged-framework Triaged by Framework team
Projects
None yet
Development

No branches or pull requests

6 participants