How can I change the global font-family for Mdb Angular appl


Topic: How can I change the global font-family for Mdb Angular application?

Trần Phong asked 2 years ago

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.


Michał Duszak staff answered 2 years ago

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";

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • 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