How To Apply Custom Font To The Member Portal


It is possible to change the font of the entire member portal through the Settings/Member Apps/Custom Code section. In short, you have to add the font you want to use from a URL, and then apply it to the application’s root element using the #root selector.

Before we dive into details, we'd advise you to read more about Member Portal Custom Code.

Customizing the member portal is only available with the Premium Apps Package.

How It Works?

Here is an example of how to set the font to Graphik with separate font files:

@font-face {
      font-family: "Graphik";
      src: url("") format("embedded-opentype"),
            url("") format("woff"),
            url("") format("woff2");
#root *:not(.MuiIcon-root) {
            font-family: Graphik, sans-serif;
Important: Exclude the icons because they use their own font-family.

Another example of how to set the font to Roboto where all versions are provided in a single URL by the CDN:

@font-face {
          font-family: "Roboto";
          src: url("")
#root *:not(.MuiIcon-root) {
          font-family: Roboto, sans-serif;


Further reading

Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.