I need variable fonts!

Has anyone succeed with using variable fonts in Flutter?

+1

I hope there are updates to this.
+1

Need this. Especially when lots of fonts are bloating up my app size.

Needed. I can add it in pubspec.yaml but dunno what to do next!
+1

I'd love to see this too.

One option for those who want to use a few variations of a variable font — you can create static "instantiations" at specific weights using fonttools, then use those.

fonttools varLib.mutator ./YourVariableFont-VF.ttf wght=140 wdth=85

In principle this works today using the FontFeature feature, but wght doesn't seem to work.

Ohhh, interesting. Do other axes?

I haven't tried anything but wght as far as the newfangled "variable fonts" axes go. In general lots of OpenType font features work, for example, I'm looking at code here that works with aalt and cwsh with values 1, 2, and 3 (using Raleway for aalt and BioRhyme Expanded for cwsh.)

If you have any test cases it would be great to attach them here, especially if there are open source fonts that you know support a particular axis (i.e. you've tested that specific .ttf file with other tools and they work), but when you try it with FontFeature in Flutter it doesn't work.

For wght in particular, let's track that using #67688.

FontFeature

Is there any examples of how to do this? We have a variable font Fraunces (Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf) and would like to use it in Flutter.
https://fonts.google.com/specimen/Fraunces

In addition to the bundled weights and sizes, it has (new to me) properties like Softness and Wonkiness. Would these be supported currently?

As far as I can tell, this doesn't work yet.

I grabbed the Fraunces font you linked, checked the allowed ranges for the variation axes (opsz, wght, SOFT, and WONK), and built a little Flutter app that displays two Texts side-by-side — one using the variable font, one using an instance of the variable font restricted to specific values.

Here's the instancing command:

fonttools varLib.instancer -o Fraunces-var-instanced.ttf Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf opsz=140 wght=500 SOFT=0 WONK=1

And the app:

class VariableFontTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text(
            pangram,
            style: TextStyle(
              fontFamily: 'Fraunces',
              fontFeatures: [
                FontFeature('opsz', 140),
                FontFeature('wght', 500),
                FontFeature('SOFT', 0),
                FontFeature('WONK', 1),
              ],
            ),
          ),
          Text(
            pangram,
            style: TextStyle(
              fontFamily: 'Fraunces-var-instanced',
            ),
          ),
        ],
      ),
    );
  }
}

And the result:

wght is the most obvious, but if you look carefully the other axes are not being picked up either.

To see what I mean, you can see the intended effects of each axis at https://github.com/undercasetype/Fraunces. Wonkiness is the easiest to pick up outside of weight, because it's essentially a set of stylistic alternatives.

There's a sample here: https://master-api.flutter.dev/flutter/dart-ui/FontFeature-class.html

edit: but yes, it seems the "variant" axes don't work yet.

(The hope is that we will work on this in the next few months; it's not super-high priority relative to e.g. getting the null safety migration working well, or getting desktop and web support to be more solid, but it is something we do care about and want to get working when we find the time. If anyone is interested in seeing if they can figure it out, don't hesitate to try. It's probably just a minor tweak to how we're passing the FontFeature data to HarfBuzz. If you want to try to contribute, you can see instructions on how to get started, build the engine, and hang out on our Discord in the CONTRIBUTOR.md doc in this repo.)

It's probably just a minor tweak to how we're passing the FontFeature data to HarfBuzz

This may need a bit of tweaking on the Dart side as well. It appears that axis values are floats, and FontFeature only supports integer values currently.

Correction:
The axis values are 32-bit fixed point (16.16). So likely double on the Dart-side.

Great, thx for all the info guys

Last bit of info I found — Harfbuzz represents the axis value as a float:
hb_variation_t
hb_font_set_variations

Ah, interesting. We will need some tweaks to the Dart API as well then, indeed.

@Hixie any update about this feature ?

Much needed

Marking this issue as P2 to match the internal bug b/215481602

@jason-simmons is still working on the CanvasKit implementation for this.

Per the internal issue, the P2-ness of this issue was related to its implementation on the mobile platforms which has been completed. Dropping the priority as Jason was pulled away to work on higher priority tasks ATM.

Thanks @jason-simmons! Can you confirm this issue can be closed now that https://skia-review.googlesource.com/c/skia/+/563536 has been rolled in with #108821?

No - there will need to be a roll of CanvasKit into the engine that includes the Skia change, followed by a PR in the engine that integrates the web UI libraries with the CanvasKit API.

I've built the engine PR - it's just waiting on the CanvasKit roll.

Ah gotcha, makes sense.

it's just waiting on the CanvasKit roll.

I'm not sure if I understand all the rolls happening but isn't flutter/engine#35088 it?

The CanvasKit roll into Flutter Web is separate from the Skia->engine roll.

See https://github.com/flutter/engine/blob/main/lib/web_ui/README.md#rolling-canvaskit

customer:fun would also like this.

@jason-simmons Is this done? Can we close it?

This has landed on all platforms.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.