Utilizing ng-bootstrap in my angular-app to create a popover, resembling something like https://i.sstatic.net/RPU49.png. I have incorporated custom fonts in the body which are specified in the styles.scss file as:
$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 ;
}
If the bootstrap import is removed from the styles.scss, the font appears like https://i.sstatic.net/48dSa.png, and the styling for the popover is lost as well https://i.sstatic.net/IcW8b.png.
Upon importing bootstrap.scss into styles.scss, the text becomes bold https://i.sstatic.net/xISyf.png, but the default fonts get overridden by bootstrap https://i.sstatic.net/Hv9jK.png.
The following code shows the button with mat-icon:
<button mat-icon-button matSuffix
popoverClass="popoverBackground"
ngbPopover="{{ 'PAYMENT.CREDIT_CARD.CVV_INFORMATION' | translate }}"
container="#checkId"
tabindex="-1"
type="button"
onclick="this.blur()"
[autoClose]="true"
class="cvv-info-button"
>
<mat-icon>info</mat-icon>
</button>
Any suggestions on how to prevent bootstrap from overriding the normal fonts?