//! This example demonstrates how to use font weights, widths and styles. use bevy::prelude::*; use bevy::text::FontSource; fn main() { App::new() .add_plugins(DefaultPlugins) .add_systems(Startup, setup) .run(); } fn setup(mut commands: Commands, asset_server: Res) { let family = FontSource::from(asset_server.load("fonts/MonaSans-VariableFont.ttf")); commands.spawn(Camera2d); commands.spawn(( Node { flex_direction: FlexDirection::Column, align_self: AlignSelf::Center, justify_self: JustifySelf::Center, align_items: AlignItems::Center, padding: px(16.).all(), row_gap: px(16.), ..default() }, children![ ( Text::new("Font Weights, Widths & Styles"), TextFont { font: family.clone(), font_size: FontSize::Px(32.0), ..default() }, Underline, ), ( // Two columns side-by-side Node { flex_direction: FlexDirection::Row, column_gap: px(32.), ..default() }, children![ ( // Left column: Weights Node { flex_direction: FlexDirection::Column, padding: px(8.).all(), row_gap: px(8.), ..default() }, children![ ( Text::new("Weight 100 (Thin)"), TextFont { font: family.clone(), weight: FontWeight::THIN, ..default() }, ), ( Text::new("Weight 200 (Extra Light)"), TextFont { font: family.clone(), weight: FontWeight::EXTRA_LIGHT, ..default() }, ), ( Text::new("Weight 300 (Light)"), TextFont { font: family.clone(), weight: FontWeight::LIGHT, ..default() }, ), ( Text::new("Weight 400 (Normal)"), TextFont { font: family.clone(), weight: FontWeight::NORMAL, ..default() }, ), ( Text::new("Weight 500 (Medium)"), TextFont { font: family.clone(), weight: FontWeight::MEDIUM, ..default() }, ), ( Text::new("Weight 600 (Semibold)"), TextFont { font: family.clone(), weight: FontWeight::SEMIBOLD, ..default() }, ), ( Text::new("Weight 700 (Bold)"), TextFont { font: family.clone(), weight: FontWeight::BOLD, ..default() }, ), ( Text::new("Weight 800 (Extra Bold)"), TextFont { font: family.clone(), weight: FontWeight::EXTRA_BOLD, ..default() }, ), ( Text::new("Weight 900 (Black)"), TextFont { font: family.clone(), weight: FontWeight::BLACK, ..default() }, ), ] ), ( // Right column: Widths Node { flex_direction: FlexDirection::Column, padding: px(8.).all(), row_gap: px(8.), ..default() }, children![ ( Text::new("FontWidth::ULTRA_CONDENSED"), TextFont { font: family.clone(), width: FontWidth::ULTRA_CONDENSED, ..default() }, ), ( Text::new("FontWidth::EXTRA_CONDENSED"), TextFont { font: family.clone(), width: FontWidth::EXTRA_CONDENSED, ..default() }, ), ( Text::new("FontWidth::CONDENSED"), TextFont { font: family.clone(), width: FontWidth::CONDENSED, ..default() }, ), ( Text::new("FontWidth::SEMI_CONDENSED"), TextFont { font: family.clone(), width: FontWidth::SEMI_CONDENSED, ..default() }, ), ( Text::new("FontWidth::NORMAL"), TextFont { font: family.clone(), width: FontWidth::NORMAL, ..default() }, ), ( Text::new("FontWidth::SEMI_EXPANDED"), TextFont { font: family.clone(), width: FontWidth::SEMI_EXPANDED, ..default() }, ), ( Text::new("FontWidth::EXPANDED"), TextFont { font: family.clone(), width: FontWidth::EXPANDED, ..default() }, ), ( Text::new("FontWidth::EXTRA_EXPANDED"), TextFont { font: family.clone(), width: FontWidth::EXTRA_EXPANDED, ..default() }, ), ( Text::new("FontWidth::ULTRA_EXPANDED"), TextFont { font: family.clone(), width: FontWidth::ULTRA_EXPANDED, ..default() }, ), ], ), ( // Right column: Style Node { flex_direction: FlexDirection::Column, padding: px(8.).all(), row_gap: px(8.), ..default() }, children![ ( Text::new("FontStyle::Normal"), TextFont { font: family.clone(), style: FontStyle::Normal, ..default() }, ), ( Text::new("FontStyle::Oblique"), TextFont { font: family.clone(), style: FontStyle::Oblique(None), ..default() }, ), ( Text::new("FontStyle::Italic"), TextFont { font: family.clone(), style: FontStyle::Italic, ..default() }, ), ] ), ] ), ], )); }