ngx-bootstrap tooltip fonts - tooltip

Question

For some reason my fonts are not rendering correctly with the tooltip in angular.
My Styles are created by Angular CLI (scss)
`
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
`
My package.json is as follows.
"dependencies": {
"#angular/animations": "~13.3.6",
"#angular/common": "~13.3.6",
"#angular/compiler": "~13.3.6",
"#angular/core": "~13.3.6",
"#angular/forms": "~13.3.6",
"#angular/localize": "~13.3.6",
"#angular/platform-browser": "~13.3.6",
"#angular/platform-browser-dynamic": "~13.3.6",
"#angular/router": "~13.3.6",
"#exceptionless/browser": "^2.0.0",
"#popperjs/core": "^2.10.2",
"#zxcvbn-ts/core": "^2.0.1",
"#zxcvbn-ts/language-common": "^2.0.1",
"#zxcvbn-ts/language-en": "^2.0.1",
"ajv": "^6.9.1",
"angular-password-strength-meter": "^4.3.0",
"angular-split": "^13.2.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"core-js": "3.21.1",
"moment": "^2.29.3",
"moment-duration": "0.0.6",
"ngx-bootstrap": "^8.0.0",
"ngx-drag-to-select": "^5.0.1",
"ngx-mask": "^13.1.11",
"ngx-sortablejs": "^11.1.0",
"ngx-toastr": "^14.3.0",
"rxjs": "6.6.0",
"sortablejs": "^1.15.0",
"tslib": "2.3.0",
"typescript": "4.6.4",
"zone.js": "~0.11.4"
},
and the font is rendering using times roman. All component fonts are rendering correctly. I am using scss to generate the styles which are then linked in by Angular using styles.js and not css as per the demo's. When I debug the injected dom it shows the font is set correctly but the browser is rendering the tooltip font as times roman.
I have tried including the bootstrap style directly in the index.html page as per this demo
https://stackblitz.com/edit/angular-2cmbj3-fnhz18?file=index.html
The only difference I can see is that I am using BootStrap 5