Topic: How can I change the global font-family for Mdb Angular application?
Expected behavior The global font-family to be changed
Actual behavior The font-family has no effect
Resources (screenshots, code snippets etc.) In my styles.scss, I have configured:
$font-family-base: 'font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"';
html, body { height: 100%; }
html {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
}
But the global font-family still has no change. For more information, I have configured Roboto at the Installation stage of Mdb. Does this prevent the font-family from changing?
How can I fix this problem? Or can you release a global configuration for these settings?
Thank you so much.
Hello, where are your styles declared relative to the mdb.scss import? It will work if you overwrite your font family above the mdb.scss import, like so:
$font-family-base: 'font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"';
html,
body {
height: 100%;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 2.3.0
- Device: Laptop
- Browser: Google Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No