How to override the font? - Material Design for Bootstrap

Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

Topic: How to override the font?

spicelogic free asked 4 years ago

Hello, After I apply the MDB Css and javascript, all of the website's fonts are changed and I do not like that font. I rather like the original Bootstrap font. Now, how can I use MDB but stop getting the fonts applied?

Tomek Makowski staff commented 4 years ago

Just add in your custom CSS file font-family: your custom font.

Regards

Add comment

spicelogic free answered 4 years ago

0 0 Best answer

<p>I actually did that. I have used following CSS for my body tag.</p>

<p>body {</p>

<pre class="prettyprint"><code>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"
</code></pre>

<p>}</p>

<p>But, still I see the regular MDB font all over my site. If I comment out the MDB CSS link from my html, only then, I see my regular expected font.</p>

<p>I am really feeling bad that, only for the font, I cannot use MDB. I really want to use the MDB library. I even tried the SASS file, by commenting out the font family variable, still, I see no change. Is there any way I can avoid the MDB font?</p>

<p>Here is the comparison. Please check these screenshots. You can see that, without MDB css, my page fonts look vivid and alive, which I like most. But, after applying MDB css, the whole site looks muted, the texts are not pleasant to read. In the screenshot, notice that, even the hyperlinks do not look like links.</p>

<p>So, am I missing anything?</p>

<p><img src="https://usercontent.mdbootstrap.com/mdb-images/support/2702e5f6-14e0-4a0c-a552-17208dd5f5e0-with%20MDB.jpg" alt="enter image description here" title=""></p>

<p><img src="https://usercontent.mdbootstrap.com/mdb-images/support/d4ac0d14-797b-4ab6-928c-25f99427edad-without%20mdb.jpg" alt="enter image description here" title=""></p>

Please insert min. 20 characters.

I actually did that. I have used following CSS for my body tag.

body {

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"

}

But, still I see the regular MDB font all over my site. If I comment out the MDB CSS link from my html, only then, I see my regular expected font.

I am really feeling bad that, only for the font, I cannot use MDB. I really want to use the MDB library. I even tried the SASS file, by commenting out the font family variable, still, I see no change. Is there any way I can avoid the MDB font?

Here is the comparison. Please check these screenshots. You can see that, without MDB css, my page fonts look vivid and alive, which I like most. But, after applying MDB css, the whole site looks muted, the texts are not pleasant to read. In the screenshot, notice that, even the hyperlinks do not look like links.

So, am I missing anything?

enter image description here

enter image description here

Tomek Makowski staff commented 4 years ago

Try to add !important at the end of the font-family property.

Add comment

Write

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.19.1
Device: Desktop
Browser: Edge
OS: Windows 10
Provided sample code: No
Provided link: No

Tags

font

About author

spicelogic

20Support score
1Questions 1Answers 0Snippets