Font Weights

Compare the configured font weights and italics in a selected type family.

<FontWeights />

Usage

Display each configured weight using its name as the sample text. Weights come from brand.typography.weights; see Typography for font setup.

<FontWeights />

Examples

Compare a consistent phrase

Choose the text family and repeat the same phrase so changes in weight are easier to compare.

<FontWeights font="text" sample="Words with purpose" />

Show configured italic weights

The sample brand configures upright weights and an italic entry. Repeat the same phrase to compare them in the display family. The first preview uses the configured weight names instead, and the preceding example selects the text family.

To include an italic row, add an entry like this to brand.typography.weights in brandtree.config.ts:

{ name: "Book Italic", weight: 450, italic: true }

Load the matching italic font files alongside the configuration. The documentation’s sample font only has upright files, so its italic row is synthesized by the browser.

<FontWeights font="display" sample="Words with purpose" />

Font availability

Rows follow configuration order, including entries marked italic. The selected family must have the corresponding font weights and styles loaded for an accurate specimen; adding a configuration entry alone does not load a font file.

API reference