Font Style

Utilities for controlling the font family of an element.

React propsCSS Properties
fontStyle={style}font-style: {style};


Use fontStyle="italic" to make text italic.

<x.p fontStyle="italic"> Computers have lots of memory but no imagination. </x.p>

Undo italics

Use the fontSize="normal" utility to display text normally. This is typically used to reset italic text at different breakpoints.

<x.p fontStyle="normal"> Computers have lots of memory but no imagination. </x.p>


To control the space between elements at a specific breakpoint, use responsive object notation. For example, adding the property fontStyle={{ md: "italic" }} to an element would apply the fontStyle="italic" utility at medium screen sizes and above.

<x.p fontStyle={{ md: 'italic' }}>{/* ... */}</x.p>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub