agm-map changes font of whole page

Question

im using agm-map with angular 9, when my page load it bold all fonts. I tried to test my front end without agm-map and everything works fine but when I add that specific line it bolds everything here is my code

<mat-card class="example-card">
<agm-map
            class="temp"
            [latitude]="lat"
            [longitude]="lng"
            [zoom]="zoom"
          >
            <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
          </agm-map>
        </mat-card>

my css

agm-map {
  height: 450px !important;
  width: 100%; /* This is really important*/
}

before loading the map and after loading the map any suggestion or can anyone point out what im doing wrong here thank you so much

Answer 1

One solution is preventing the loading of Google font //fonts.googleapis.com/css?family=Roboto by directive

file google-fonts-loading-disable.directive.ts

import { Directive } from '@angular/core';
    
@Directive({
  selector: '[appGoogleFontsLoadingDisable]'
})
export class GoogleFontsLoadingDisableDirective {
  constructor() {
    const head = document.getElementsByTagName('head')[0] as any;
    const insertBefore = head.insertBefore;
    head.insertBefore = function (newElement: any, referenceElement: any) {
      if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {
        return;
      }
      insertBefore.call(head, newElement, referenceElement);
    };
  }
}

add directive registered in app.modules.ts

@NgModule({
declarations: [
    AppComponent,
    GoogleFontsLoadingDisableDirective,

and using the directive with Google Maps

<agm-map appGoogleFontsLoadingDisable [latitude]="event.geo.lat" [longitude]="event.geo.lgtd" [zoom]="14" style="height: 60vh;">
    <agm-marker [latitude]="event.geo.lat" [longitude]="event.geo.lgtd" [label]="event.eventCd" [title]="event.eventCd+' '+event.eventCreatedDtm"></agm-marker>
</agm-map>