Forum Discussion

JohanLiljeroos's avatar
JohanLiljeroos
Community Member
2 years ago

Unable to update the brand-ui font from Lato to Roboto after the new scorm export

Hello, we are doing a course for some baltic languages and have had the problem with that Lato is missing some of the languages special characters. This would result in a diffrent font comming in for a single letter midsentence. This does not look great and previously we could fix this by going into the main.bundle.css and main.bundle.js to update the files..

from:

var(--font-family-ui)

to:

var(--font-family-body)

 
This would make the course write over the use of Lato(quiz module and chapters) and just use Roboto. The <p> and <span> in code that use our custom fonts work fine..

Since the update and new code from the scorm exports these files do not exist anymore and i read that everything is supposed to be within the index.html 

Great I thought, I could just update the root style..

<style>
.brand--head, .brand--head* { font-family: 'Custom Font'!important; }
.brand--body, .brand--body* { font-family: 'Roboto'!important; }
.brand--lhead, .brand--lhead* { font-family: 'Custom Font'!important; }
.brand--lbody, .brand--lbody* { font-family: 'Roboto'!important; }
.brand--ui, .brand--ui* { font-family: 'Lato'!important; }

To
<style>
.brand--head, .brand--head* { font-family: 'Custom Font'!important; }
.brand--body, .brand--body* { font-family: 'Roboto'!important; }
.brand--lhead, .brand--lhead* { font-family: 'Custom Font'!important; }
.brand--lbody, .brand--lbody* { font-family: 'Roboto'!important; }
.brand--ui, .brand--ui* { font-family: 'Roboto'!important; }

but it seems like there is some sort of built in function that will overwrite this and setting the brand-ui to.. --font-family-ui: Lato;

In developer tool i can easily change this to roboto and everything is fine.. but i cannot for the love of god find where i can remove Lato from some sort of function to not overwrite this.

I have opened every .js and .css file and tried to change lato to roboto but no luck in getting the course to use roboto instead.

How can we fix this after the new update?
Added images for how Lato is displayed and the code from developerstool and Roboto(how we would like it)
rise 360
  • JohanLiljeroos's avatar
    JohanLiljeroos
    Community Member
    2 years ago

    Found out that i could overwrite all the lato-fonts.woff with a roboto.woff that i named the same way the lato-font.woff was named.. This does work, but seem like a pretty stupid solution.

  • PhilFoss's avatar
    PhilFoss
    Community Member
    2 years ago

    Johan, that is a creative solution changing the font filenames, but I agree not the cleanest solution. These css variables can be kind of confusing, but I was able to use this code to change my ui font to Arial, I put this directly on the index page within the existing style tag. this changes all the 'ui' fonts- mostly the side navigation elements and some other labels.

    You'll just want to change to Roboto.

    :root {
    --font-family-ui: Arial !important;
    }

  • JohanLiljeroos's avatar
    JohanLiljeroos
    Community Member
    2 years ago

    Thanks Phil for this snippet of code. This helped me and sent me in the right direction, I just updated one of the css files from "lato, sans serif" to roboto and it seems like i have taken out Lato from the equation, everywhere.

    Incase any articulate person reads this in the future:

    Would love to be able to change the font family in the Rise UI before export so we dont end up with a font that cannot handle some special characters. 
    The custom fonts for headings and paragraphs work as intended, but things that are not affected from these and relay on the brand/font-family-ui needs a way to be changed.

Related Content