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


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 2 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 2 years ago


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


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


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?

Marta Wierzbicka staff answered 5 years ago


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


we removed Roboto font files from our package. Now, we use only a link from here:

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.


Please insert min. 20 characters.


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



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