How To Apply Custom Font To The Member Portal

Blago

August 07, 2020 09:20

It is possible to change the font of the whole 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, I'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;
 }