To change the font of the entire Member Portal, go to Settings > Experience Hub > Member Apps > Custom Code section is possible. In short, you must 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("https://assets.qbstudios.co.nz/fonts/Graphik-Regular-Web.eot") format("embedded-opentype"),
url("https://assets.qbstudios.co.nz/fonts/Graphik-Regular-Web.woff") format("woff"),
url("https://assets.qbstudios.co.nz/fonts/Graphik-Regular-Web.woff") 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("https://fonts.googleapis.com/css?family=Roboto")
}#root *:not(.MuiIcon-root) {
font-family: Roboto, sans-serif;
}