It is possible to change the font of the whole member portal through the Settings/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, I'd advise you to read more about Member Portal Custom Code.
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;
}
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;
}
Comments
Please sign in to leave a comment.