Font settings

euiTheme.font.family token

The whole font family stack for all parts of the UI. We encourage only customizing the first font in the stack.

All of EUI defaults to the base font.family. However, you can use this token to change specific instances.

'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif

✄𐘗
tsx code block:
✄𐘗css`
  font-family: ${euiTheme.font.family};
`

euiTheme.font.familyCode token

The font family used for monospace UI elements like EuiCode

'Roboto Mono', Menlo, Courier, monospace

✄𐘗
tsx code block:
✄𐘗css`
  font-family: ${euiTheme.font.familyCode};
`

euiTheme.font.familySerif token

The font family used for serif UI elements like blockquotes within EuiText

Georgia, Times, Times New Roman, serif

✄𐘗
tsx code block:
✄𐘗css`
  font-family: ${euiTheme.font.familySerif};
`

euiTheme.font.featureSettings token

Controls advanced features OpenType fonts.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings

'calt' 1, 'kern' 1, 'liga' 1

✄𐘗
tsx code block:
✄𐘗css`
  font-feature-settings: ${euiTheme.font.featureSettings};
`

euiTheme.font.defaultUnits token

Sets the default units used for font size & line height set by UI components like EuiText or EuiTitle. Defaults to rem.

Note: This may override by some internal usages, e.g. EuiText's relative size which must use em.

Hello world

✄𐘗
tsx code block:
✄𐘗<EuiProvider modify={{ font: { defaultUnits: 'px' } }}>
  <EuiText>
    <p>Hello world</p>
  </EuiText>
</EuiProvider>