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.

Thanks.


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

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


syahid answered 2 years ago

can you make me tutorial to change font family style!


Marta Szymanska staff pro premium answered 2 years ago

Hi,

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

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 commented 2 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 2 months 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


Please insert min. 20 characters.
Status

Answered

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