Topic: How to change default font in MDB5
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: https://mdbootstrap.com/docs/standard/getting-started/webpack-starter/
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.
you need to follow a few steps:
- in
src/index.htmlremove the roboto font import - in
src/scss/index.scsschange import to@import '../../mdb/scss/mdb.pro.scss';or@import '../../mdb/mdb/scss/mdb.pro.scss';if you are using MDB Advanced in
mdb/scss/free/_variables.scsschange variables to:$font-family-ubuntu: 'Ubuntu', sans-serif !default; $font-family-base: var(--mdb-font-ubuntu) !default;in
mdb/scss/free/_root.scsschange to::root { --mdb-font-ubuntu: #{inspect($font-family-ubuntu)}; --mdb-bg-opacity: 1; }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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
sdpollack pro premium commented 3 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 pro premium commented 3 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 pro premium commented 3 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 mdb.pro.scss 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 pro premium commented 3 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 pro premium commented 3 years ago
BTW - This worked in your test index.html page, but did not work in the rest of my app.