Skip to content
Documentation
Components
Utility
Font

Font

A Font sets the family, size, style, weight and line height of text. Use the predefined fonts of the design system, which follow a type scale from DisplayLarge down to LabelSmall, or define your own. Texts, buttons, stacks and other components take it through their Font method; a stack passes it on to the texts inside.

Font

return VStack(
	Text("DisplaySmall").Font(DisplaySmall),
	Text("HeadlineMedium").Font(HeadlineMedium),
	Text("TitleLarge").Font(TitleLarge),
	Text("BodyMedium").Font(BodyMedium),
	Text("LabelSmall").Font(LabelSmall),
	Text("MonoMedium").Font(MonoMedium),
	Text("Font{Size: L20, Style: ItalicFontStyle}").Font(Font{Size: L20, Style: ItalicFontStyle}),
).Alignment(Leading).Gap(L8)

Predefined fonts

GroupVariables
DisplayDisplayLarge, DisplayMedium, DisplaySmall
HeadlineHeadlineLarge, HeadlineMedium, HeadlineSmall
TitleTitleLarge, TitleMedium, TitleSmall
BodyBodyLarge, BodyMedium, BodySmall
LabelLabelLarge, LabelMedium, LabelSmall
MonospaceMonoLarge, MonoMedium, MonoSmall, MonoBoldLarge, MonoBoldMedium, MonoBoldSmall, MonoItalicLarge, MonoItalicMedium, MonoItalicSmall
Older namesTitle, SubTitle, Large, Small, Monospace

Fields

FieldDescription
Name FontNameFont family, e.g. DefaultFontName (Inter) or MonoFontName (IBM Plex Mono).
Size LengthFont size as a Length.
Style FontStyleNormalFontStyle or ItalicFontStyle.
Weight FontWeightNumeric weight, e.g. BodyFontWeight (400) or HeadlineAndTitleFontWeight (700).
LineHeight LineHeightLine height as a CSS value.

Font has no methods.

Related