0

Could anyone give me a hint on probable causes on why the font of my website changes when one of the navbar items is selected?

This is the website: http://sideta.tk/ (the fourth navbar item "Valgyklos" changes the font)

Here is the partial html code:

   <div ng-controller="valgyklosCtrl" class="container">
    <div class="row" style="height: 40px"></div>
    <div class="row">
        <div class="col-md-5">
            <ui-gmap-google-map center='map.center' zoom='map.zoom'>
                <ui-gmap-marker coords="marker.coords" idkey="marker.id"></ui-gmap-marker>
            </ui-gmap-google-map>
            <!--<google-map center='map.center' zoom='map.zoom'></google-map>-->
            <h3 class="text-center">NT Valdos</h3>
            <p>Valgykla esanti NT Valdos teritorijoje.</p>
        </div>

        <div class="col-md-2"></div>
        <div class="col-md-5">
            <ui-gmap-google-map center='map2.center' zoom='map2.zoom'>
                <ui-gmap-marker coords="marker2.coords" idkey="marker2.id"></ui-gmap-marker>
            </ui-gmap-google-map>
            <h2 class="text-center">Energetikos Remontas</h2>
            <p>Valgykla Esanti Energetikos Remonto teritorijoje.</p>
        </div>
    </div>

</div>

and here is the controller:

sidetaApp.controller('valgyklosCtrl', function($scope) {
  $scope.map = { center: { latitude: 54.902522, longitude: 23.996512 }, zoom: 14 };
  $scope.marker = { coords: { latitude: 54.902522, longitude: 23.996512 }, id: 0 };
  $scope.map2 = { center: { latitude: 54.908702, longitude: 23.992693 }, zoom: 14 };
  $scope.marker2 = { coords: { latitude: 54.903763, longitude: 23.997539 }, id: 1 }

});

tadalendas
  • 1,461
  • 3
  • 16
  • 37

1 Answers1

0

I think is it that on initial load you are loading Roboto with only the 300 font weight. See your network/css in dev tools.

css?family=Roboto:300
fonts.googleapis.com

When you go to the page with the map on, the API is loading all the font weight of the Roboto font

css?family=Roboto:300,400,500,700
fonts.googleapis.com

And if you look at your css you are using different font weights other that 300

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  **font-weight: 500;**
  line-height: 1.1;
  color: inherit;
}

So when the full Roboto font set is loaded in, the correct font weights are applied to the styles.

Looks like you need to use in the full range of font weights at the start, or alter your css to use the 300 weight.

Update: See Google Maps v3 - prevent API from loading Roboto font to stop the google map api loading in Roboto font

Community
  • 1
  • 1
r8n5n
  • 2,059
  • 17
  • 23
  • Perfect, thanks for your help. Why is it the case that extra font weights are loaded on that specific navbar section? I only have specified the font in the main HTML file and only with the weight of 300. I also see in the dev tools that the extra weights have "Other" under Initiator. – tadalendas Oct 01 '15 at 13:50
  • I think it must be the google map api that uses the roboto font and therefore loads it in. Perhaps there is a setting in the api where you can tell it not to load it in. – r8n5n Oct 01 '15 at 14:18
  • I have added a link in the answer to stop the map api loading Roboto – r8n5n Oct 01 '15 at 14:22