Skip to content

Custom Fonts

You can apply a font by adding the font-family to the html or body in a css <style> tag.

If you want to apply multiple fonts for multiple themes then add the font-family property to the appropriate css class.

Self-hosted fonts

You can host your fonts locally and import them in the <style> tag of the index.html. Then you can apply it to the style with adding the font-family to body, html or a specific theme.

For example:

<style>
  @import "<%= getPrivateUrl('fonts/nunito-sans/300.css') %>";
  @import "<%= getPrivateUrl('fonts/nunito-sans/300-italic.css') %>";
  @import "<%= getPrivateUrl('fonts/nunito-sans/700.css') %>";
  @import "<%= getPrivateUrl('fonts/nunito-sans/700-italic.css') %>";

  body {
    font-family: "Nunito Sans", "Calibri", "Arial", "sans-serif";
    line-height: 1.4em;
    font-weight: 400;
  }
</style>

External Fonts

You can also import external fonts, e.g. Google fonts, by adding the import statement in the <head> tag of ìndex.html an embedding the font in the font-family css part, as described above.

For example:

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
    rel="stylesheet"
  />

  <style>
    html {
      font-family: "Roboto", sans-serif;
    }
  </style>
</head>

Note:

  • Eventually update your data protection site to inform users about the external font usage.
  • If external fonts are not loaded, make sure to check the CSP settings of the app.

Font weights

Our web components use the css property font-weight with the relative weight values lighter and bolder. So be carefully with the initial font weight. Take a look at this documentation about relative font weight at developer.mozilla.org.