Font weight

EUI establishes a set of 5 font-weights based on their numeric keywords values. When importing the font-family from your service of choice, ensure that you have all 5 weights contained in your import. See the

Getting Started page for details on importing fonts.

euiTheme.font.weight[weight] token

To maintain consistency, EUI establishes the font weight patterns directly in the text and title components. However, we recommend using the theme keys instead of font-weight: bold in your css to ensure proper rendering with the imported font family.

I am proper bold

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

𐘂𐘂

✄𐘗✄𐘗

Sample ↦	Token ↦	Value ↵
Sample Aa ↦	Token font.weight.light ↦	Value 300 ↵
Sample Aa ↦	Token font.weight.regular ↦	Value 400 ↵
Sample Aa ↦	Token font.weight.medium ↦	Value 450 ↵
Sample Aa ↦	Token font.weight.semiBold ↦	Value 500 ↵
Sample Aa ↦	Token font.weight.bold ↦	Value 600 ↵

𐘂𐘂

Variable fonts

EUI also supports variable font families which can be imported from Google fonts using their new API. Though we still recommend sticking to the theme token names.

400

The quick brown fox

✄𐘗
jsx code block:
✄𐘗css`
  font-weight: ${euiTheme.font.weight.regular};
`