How To Apply Custom Font To The Member Portal

Introduction

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.

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;
 }

Further reading

• Learn more about How To Use CSS Selectors
• Learn more about Member Portal Layout, IDs and Classes
• Check out our Code Snippets