Change font-family globally

Topic: Change font-family globally

glynszasz pro asked 4 years ago

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

Marta Szymanska staff pro premium answered 4 years ago

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

Grf commented 3 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.


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

Marta Szymanska staff pro premium answered 3 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 pro premium priority commented 2 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 Szymanska staff pro premium commented 2 years ago


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

Best, Marta

Marta Szymanska staff pro premium answered 3 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

syahid answered 2 years ago

can you make me tutorial to change font family style!

Marta Szymanska staff pro premium answered 2 years ago


we will create one soon, probably in January.

Best, Marta

hofmannn333 answered 2 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 Szymanska staff pro premium answered 2 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 commented 8 months 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 8 months 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

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
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No