|
| 1 | +--- |
| 2 | +title: FontWeight also controls the weight attribute of variable fonts |
| 3 | +description: > |
| 4 | + FontWeight values applied to text styles will now set the weight attribute of variable fonts. |
| 5 | +--- |
| 6 | + |
| 7 | +{% render "docs/breaking-changes.md" %} |
| 8 | + |
| 9 | +## Summary |
| 10 | + |
| 11 | +A `FontWeight` in a text style will also set the weight attribute of variable |
| 12 | +fonts. It is no longer necessary to separately use `FontVariation` to control |
| 13 | +the weight of these fonts. |
| 14 | + |
| 15 | +## Context |
| 16 | + |
| 17 | +Text styles can specify a `FontWeight` value that configures the thickness of |
| 18 | +the strokes used to paint the text. `FontWeight` will select the closest |
| 19 | +weight among a set of font files belonging to the same family. |
| 20 | + |
| 21 | +However, some fonts are distributed as [variable fonts](https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts) |
| 22 | +where a single font file allows adjustment of attributes such as weight. For |
| 23 | +variable fonts, applications also had to use the `FontVariation` API to set |
| 24 | +the value of the weight variation axis within the selected font file. |
| 25 | + |
| 26 | +Flutter has now changed the behavior of `FontWeight` so that it will both |
| 27 | +select the closest matching font file and set the weight attribute of variable |
| 28 | +fonts. |
| 29 | + |
| 30 | +## Description of change |
| 31 | + |
| 32 | +Setting the `fontWeight` property of objects such as `TextStyle` will now also |
| 33 | +set the value of the `wght` variation axis of fonts that support it. Flutter |
| 34 | +will internally apply the equivalent of adding a `FontVariation('wght')` |
| 35 | +attribute to the style whose value is the same as the `FontWeight`. |
| 36 | + |
| 37 | +`FontWeight` instances can now be constructed using arbitrary integer values |
| 38 | +ranging from 1 to 1000. This allows usage of weights beyond the |
| 39 | +`FontWeight.w100` through `FontWeight.w900` range with values that are not |
| 40 | +multiples of 100. This also means that linear interpolation of fonts using |
| 41 | +`FontWeight.lerp` can yield values other than `FontWeight.w100` through `w900`. |
| 42 | + |
| 43 | +The `FontWeight.index` property is now deprecated because it only identifies |
| 44 | +the `FontWeight.w100` through `w900` weights. Applications should use |
| 45 | +`FontWeight.value` to obtain the thickness level of a font. |
| 46 | + |
| 47 | +## Migration guide |
| 48 | + |
| 49 | +Applications may see changes in text rendering if they used variable fonts and |
| 50 | +were specifying `FontWeight` in text styles without a matching |
| 51 | +`FontVariation('wght')` value. |
| 52 | + |
| 53 | +If these changes are undesirable, then the application should change the |
| 54 | +`FontWeight` to a value that achieves the intended rendering. For example, |
| 55 | +to restore the font's default weight, set `fontWeight` to `FontWeight.normal`. |
| 56 | + |
| 57 | +## Timeline |
| 58 | + |
| 59 | +Landed in version: 3.38.0-0.0.pre |
| 60 | +In stable release: Not yet |
| 61 | + |
| 62 | +## References |
| 63 | + |
| 64 | +API documentation: |
| 65 | + |
| 66 | +* [`FontWeight`][] |
| 67 | + |
| 68 | +Relevant issue: |
| 69 | + |
| 70 | +* [Issue 148026][] |
| 71 | + |
| 72 | +Relevant PR: |
| 73 | + |
| 74 | +* [PR 175771][] |
| 75 | + |
| 76 | +[`FontWeight`]: {{site.api}}/flutter/dart-ui/FontWeight-class.html |
| 77 | +[Issue 148026]: {{site.repo.flutter}}/issues/148026 |
| 78 | +[PR 175771]: {{site.repo.flutter}}/pull/175771 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?v=4&size=40){kind=avatar}
0 commit comments