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?

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.