How to get fontStack

import { fontStack } from 'fds/system';

Type: Function

A styling mixin which sets the "font-family" based on the specified name.


# Name Type Description
1. name String

The name of the font stack to render the textual content of the component in. This will set the "font-family" CSS property based on a predefined set of values. Each font stack represents a certain use case in which it should be implemented, which is described below.

Can be one of:

  • content: a serif font, should be used for articles and longer (regular) content.

  • interface: a sans-serif font, should be used for labels in components and other interface elements.

  • monospace: a fixed-width font, should be used for code (examples).


Type: String

A style rule resulting in a generated class name on the element.

Generally created using fds/system/applyCss and/or any styling utility provided by FDS.

Was this page helpful?