Skip to content

Font

React UI uses native font stack for optimum text rendering on every device and OS.

This is a good practice because it reduces the size of the data transferred, and it also ensures that the text is displayed in the font that the user is most comfortable with.

You can change it to a custom font by loading the font in your project:

   <link
     href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;700&display=swap"
     rel="stylesheet"
   />

… and overriding the --rui-font-family-base CSS custom property:

:root {
  --rui-font-family-base: 'Titillium Web', helvetica, roboto, arial, sans-serif;
}