Font Family

Utilities for controlling the font family of an element.

Sans-serif

Use fontFamily="sans" to apply a web safe sans-serif font family:

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

Serif

Use fontFamily="serif" to apply a web safe serif font family:

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

Monospaced

Use fontFamily="mono" to apply a web safe monospaced font family:

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

Any font

Use fontFamily={font} to apply a any custom font:

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

Responsive

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

<x.p fontFamily={{ xs: 'serif', md: 'sans' }}>{/* ... */}</x.p>

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

Customizing

Font Families

If you'd like to customize your values for font families, use the theme.fonts section of your theme.

  // theme.js
  export const theme = {
    fonts: {
+     display: 'Oswald, ...',
+     body: 'Open Sans, ...',
    },
  }

Fonts have to be specified exactly like you specify them in CSS property font-family.

Learn more about customizing the default theme in the theme customization documentation.

If you don't want to customize it, a set of fontFamily is already defined in default theme:

const defaultTheme = {
  // ...
  fontFamilies: {
    mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
    serif: `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`,
    sans: `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
  },
}

Use custom Web Fonts

To use custom web fonts, you have to load them in global using external CSS files or createGlobalStyle utility.

Styled bindings

Automatic

Using xstyled's styled, all font families defined are automatically bound to font-family attribute:

import styled from '@xstyled/...'

const Title = styled.h4`
  font-family: sans;
`

To learn more about styled syntax, read styled syntax documentation.

Manual

It is possible to manually bind a font size using th.font utility:

import styled from '...'
import { th } from '@xstyled/...'

const Title = styled.h4`
  font: ${th.font('sans')};
`

Hooks

Get a font size in any component using useFont hook:

import { useFont } from '@xstyled/...'

function Title() {
  const font = useFont('sans')
}