glynszasz pro asked 6 years ago


Where in the CSS do I change the font family from Roboto to something else?

Marta Wierzbicka staff answered 4 years ago


Hi,

we don't have yet. What would you like to know? Would you try to add to your CSS this code below?

html * { font-size: 1em !important; color: #000 !important; font-family: Arial !important; }

Best, Marta


garciave free commented 3 years ago

The strange behaviour is that adding the above code to the CSS (even removing the font-size attribute), the icons of Fontawesome icons are not displayed (only an square instead).

Do you know why?


Marcin Luczak staff commented 3 years ago

@garciave,

This is because Font Awesome icons use their own font and overwriting it globally also affects icons. To fix it just use this selector:

html *:not('i') {
  font-family: Arial !important;
}

Keep coding, Marcin


hofmannn333 free answered 4 years ago


Where is the tutorial ? Could you please just write here how to do it? But explain in good, so that the people that aren't that good with coding, can understand. Thank you

I already tried messing with _typography.scss, but couldn't change anything, please help


Marta Wierzbicka staff answered 4 years ago


Hi,

we will create one soon, probably in January.

Best, Marta


syahid free answered 4 years ago


can you make me tutorial to change font family style!


Marta Wierzbicka staff answered 5 years ago


Hi,

thank you for your idea @Christian Jensen, we will think about this and we'll inform about this change if it appears in our changelog.

Best, Marta


Christian Jensen free answered 5 years ago


Wouldn't the best and easiest thing to do would be to convert this to a variable in the core?

https://git.mdbootstrap.com/mdb/jquery/jq-pro/blob/master/scss/core/_typography.scss#L57


Marta Wierzbicka staff answered 5 years ago


Hi,

for now, we don't have a guide on how to change the font but we will create one in the future. In the package, you have the font/roboto catalog and inside you have the files for the font. You have to change these files for these ones you want and after that, you need to change paths in scss/core/_typography.scss file. It should help.

Best, Marta


davi priority commented 4 years ago

Hi Marta. It seems to be not so simple... where do we change the parameter {$roboto-font-path}? MDB should provide a mechanism to change the font in an easier way.


Marta Wierzbicka staff commented 4 years ago

Hi,

we removed Roboto font files from our package. Now, we use only a link from here: https://fonts.google.com/specimen/Roboto.

Best, Marta


Marta Wierzbicka staff answered 6 years ago


Hi, in the _typography.scss file you can do this. Best, Marta

Grf free commented 5 years ago

Hi, doing so doesn’t change the font, I noticed. Is there a step-by-step guide on how to change the font? I also noticed my current page is showing a Apple system font, meaning the Roboto fonts aren’t loaded.

Thanks.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags