Cannot display custom font on my Cumulocity tenant

[luclib]

I am trying to add a custom font to my Cumulocity application via the branding.less file. I have create a folder called assets/fonts in the project root directory to hold my .ttf file and assigned it to a custom variable in my style sheet:

@font-face {
    font-family: 'Nunito Sans';
    src: url(../assets/fonts/NunitoSans-Regular.ttf);
}

:root {
   .  .  .
    --font-family-base: 'Nunito Sans' !important;
    --headings-font-family: var(--font-family-base) !important;
}

The font shows up when I run my application on localhost:9000, except for the heading which seems to be using the tenant’s font style (Lato).

Furthermore, once I upload the application to Cumulocity, my custom font is overridden by my tenant’s font.

Here’s a screenshot of my tenant’s font settings.

[Bishan_T_Prasad]

I think you have not included the assets folder to your build.

Try adding the following to your package.json file.

"c8y": {
    "application": {
        ...,
        "copy": [
                {
                  "from": "path to assets folder",
                  "to": "assets"
                }
              ]
      }
}

[luclib]

Hi Bishan,

Thanks a lot. I added the property to my package.json as you suggested and it is displaying the new font after I uploaded the new application to the tenant.

The only thing issue remaining is that the heading is still displaying the old font.

Any ideas as to why this is the case?

[Jan_Hommes]

Sounds like a style issue. When the font is loaded the headline might not have the right CSS class or style assigned. You can investigate the applied styles in the dev-tools (Chrome or Firefox), right-click on the headline and select “inspect”.