Topic: How to change default font in MDB5

sdpollack premium asked 2 years ago

I'm trying to change the default font and highlight color to my company's brand standard.

I'm experienced with CSS, but unfamiliar with SASS, so the hints in this article aren't enough for me:

I've tried changing the $font-family-base in mdb-webpack-starter-master\mdb\scss\free_variables.scss, that it didn't work.

$font-family-roboto: 'Ubuntu', sans-serif !default;
$font-family-ubuntu: 'Ubuntu', sans-serif !default;
$font-family-base: var(--mdb-font-ubuntu) !default;

Could you please provide direction on the "right" way to override the default font. Changing the variable named "$font-family-roboto" to a different font seems less than ideal.

Some clearer instructions on how the the scss files in the custom folder are intended to be used would be appreciated. Also, some hints about how to find the correct values to change to affect these global variables would be appreciated.

I've found several articles on how to do this, but most are obsolete, don't apply to MDB 5 with webpack and have resulted in wasted time.

sdpollack premium commented 2 years ago

It appears that I've been changing the wrong files. I assumed I should be changing the files in the \mdb-webpack-starter\mdb\scss folder, but the build happens from someplace else, perhaps the mdb-webpack-starter\node_modules\mdb-ui-kit\src\scss.

All I want to do is change the default font. I am willing to use the full package, I don't really want to create an "optimized" version with only the modules I use. Please provide clearer instructions on how to do this.

sdpollack premium commented 2 years ago

No that wasn't it. I've updated both versions of the _root.scss and _variables,.scss files. I run "npm run build" and i see that new css files are created, but they still have the same references to Roboto in them.

sdpollack premium commented 2 years ago

I finally figured it out. I had to replace the index.scss file in the /src/scss/ folder with the contents of the file from the /mdb/scss/ folder, then change all of the file paths from ./{filename} to ../../mdb/scss/pro/{filename}.

I'm pretty frustrated that your process for creating a custom version of the Web-UI-Kit is so challenging. It should be possible to make the changes in one place, then issue "npm run build" and be done with it.

sdpollack premium commented 2 years ago

Actually, I shouldn't have to do any of this. I should be able to update an entry in one place and not have to rebuild anything. I was expecting something like this to work...

body { font-family: 'Ubuntu', sans-serif !important; }

sdpollack premium commented 2 years ago

BTW - This worked in your test index.html page, but did not work in the rest of my app.

Grzegorz Bujański staff answered 2 years ago

you need to follow a few steps:

  1. in src/index.html remove the roboto font import
  2. in src/scss/index.scss change import to @import '../../mdb/scss/'; or @import '../../mdb/mdb/scss/'; if you are using MDB Advanced
  3. in mdb/scss/free/_variables.scss change variables to:

    $font-family-ubuntu: 'Ubuntu', sans-serif !default;
    $font-family-base: var(--mdb-font-ubuntu) !default;
  4. in mdb/scss/free/_root.scss change to:

    :root {
      --mdb-font-ubuntu: #{inspect($font-family-ubuntu)};
      --mdb-bg-opacity: 1;

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

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes