font_variations/
font_variations.rs

1//! This example demonstrates how to use font variations to control variable font axes.
2
3use bevy::prelude::*;
4use bevy::text::{FontVariationTag, FontVariations};
5
6fn main() {
7    App::new()
8        .add_plugins(DefaultPlugins)
9        .add_systems(Startup, setup)
10        .run();
11}
12
13fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
14    let font: FontSource = asset_server.load("fonts/MonaSans-VariableFont.ttf").into();
15
16    commands.spawn(Camera2d);
17
18    commands.spawn((
19        Node {
20            flex_direction: FlexDirection::Column,
21            align_self: AlignSelf::Center,
22            justify_self: JustifySelf::Center,
23            align_items: AlignItems::Center,
24            ..default()
25        },
26        children![
27            (
28                Text::new("Font Variations (wght axis)"),
29                TextFont {
30                    font: font.clone(),
31                    font_size: FontSize::Px(32.0),
32                    ..default()
33                },
34                Underline,
35            ),
36            (
37                Node {
38                    flex_direction: FlexDirection::Column,
39                    padding: px(8.).all(),
40                    row_gap: px(8.),
41                    ..default()
42                },
43                Children::spawn(SpawnIter(
44                    [100, 200, 300, 400, 500, 600, 700, 800, 900]
45                        .into_iter()
46                        .map(move |weight| (
47                            Text(format!("wght {weight}")),
48                            TextFont {
49                                font: font.clone(),
50                                font_size: FontSize::Px(32.0),
51                                font_variations: FontVariations::builder()
52                                    .set(FontVariationTag::WEIGHT, weight as f32)
53                                    .build(),
54                                ..default()
55                            },
56                        ))
57                )),
58            ),
59        ],
60    ));
61}
font_variations/font_variations.rs

font_variations/
font_variations.rs
