title: How to 'prevent' bootstrap from overriding the existing styles in the application
body: <p>I am using ng-bootstrap in my angular-app to build a popover which looks something like <a href="https://i.stack.imgur.com/RPU49.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RPU49.png" alt="its image" /></a>
  I am using custom fonts in my body which are defined in styles.scss file as</p>
  <pre><code>$r-typography: mat-typography-config(
    $font-family: 'TedNext, sans-serif'
  );
  $f-typography: mat-typography-config(
    $font-family: 'Yolo, sans-serif'
  );
  html[realm=r] {
    @include mat-core($r-typography);
    box-sizing: border-box;
    font-family: TedNext, sans-serif ;
  }
  
  html[realm=f] {
    @include mat-core($f-typography);
    box-sizing: border-box;
    font-family: Yolo, sans-serif ;
  }
  </code></pre>
  <p>if I remove the bootstrap import in styles.scss the font looks <a href="https://i.stack.imgur.com/48dSa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/48dSa.png" alt="subtle black" /></a> and I also lose my styling for the popover <a href="https://i.stack.imgur.com/IcW8b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IcW8b.png" alt="like this image" /></a></p>
  <p>when I import the boostrap.scss into styles.scss the text becomes bold <a href="https://i.stack.imgur.com/xISyf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xISyf.png" alt="like this image" /></a>
  but my default fonts are overridden by bootstrap <a href="https://i.stack.imgur.com/Hv9jK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hv9jK.png" alt="like this" /></a></p>
  <p>Here is the code for the button that has mat-icon</p>
  <pre><code>&lt;button mat-icon-button matSuffix
                        popoverClass=&quot;popoverBackground&quot;
                        ngbPopover=&quot;{{ 'PAYMENT.CREDIT_CARD.CVV_INFORMATION' | translate }}&quot;
                        container=&quot;#checkId&quot;
                        tabindex=&quot;-1&quot;
                        type=&quot;button&quot;
                        onclick=&quot;this.blur()&quot;
                        [autoClose]=&quot;true&quot;
                       class=&quot;cvv-info-button&quot;
                &gt;
                  &lt;mat-icon&gt;info&lt;/mat-icon&gt;
                &lt;/button&gt;
  </code></pre>
  <p>Any idea about how can I prevent bootstrap to override my normal fonts?</p>