Other files overriding my template css with bootstrap?

Question

I have a strange problem with one of my homepages. I changed the font-family and font-size in my Joomla Template (JM Guesthouse by Joomla Monster) and nothing happened.

After some minutes playing with the development tool, I discovered that something is loading the bootstrap.min.css file and this is overriding the CSS of my template.

After some investigating the backend, I discovered that the Breezing Form that I implement via a module and iframe is loading this file.

Also, the Googlemap that I implement with an iframe is loading this file as well.

After I disabled both, the CSS works correctly.

I would really like to use both on my homepage. How can I enable all of these processes and preserve my template's css declarations?

Answer 1

Bootstrap does not use !important in its CSS font declarations, therefore the CSS file where you have declared your fonts must be getting loaded before Bootstrap CSS. I have no knowledge of Joomla Monster templates; but with most template developers, there is usually a "custom" CSS file for this purpose. Joomla-Monster Documentation. Otherwise, you could always declare your fonts using !important, e.g.

font-family: YourFont, sans-serif !important;

Remember to declare suitable fallback fonts in case YourFont fails to be parsed by the browser.