How to remove Boostrap default body style in a component.html

Question

I have a angular widget directive with my own css. when i add my widget in a another application component it's overriding with Bootstrap default css/styles.

Here is my boostrap css

My question is How i can remove font-family in my compoent .css I am trying to override, but its not working?

    body {

line-height: 1.15; 
}

I also tried with !important as follows, but still applying bootstrap styles

body {
  font-family: "Open Sans", sans-serif !important;
}

Answer 1

Insert your CSS after the bootstrap CSS. If that doesn't work user !important to overwrite the styles you want.

example:

body {
   font-family:none!important;
   line-height: 1.15!important;
}