Topic: Change font-family globally
_typography.scss file you can do this.
Best,
Marta Grf commented 6 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
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 5 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 5 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
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
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
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 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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No