6

I have a problem with the font-family on a page where I am using the google maps APIv3

On the page with Google Maps, my font changes to something else then my configured font-family, when I don't have this problem on any other page.

This is the code for importing the Google Maps API, I don't know if there is something wrong here. 

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

The font I am using is from the fonts.googleapis.com, if I change the font-family to something installed on my PC, let's say 'Consolas', there is no problem with the font

<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>

If i leave this line out, the font changes back to the configured font-family from fonts.googleapis.com.

Anybody had the same problem before? Can't figure out a solution.

If you want to see my problem first hand, its the following website 'Home' and 'Contact' page (website stil under construction)

Homepage

Contactpage

Jacob

jbern
  • 427
  • 3
  • 15
Jacob Notte
  • 164
  • 3
  • 12

1 Answers1

5

The code for importing the Google Maps API is ok, nothing wrong with it. What's happening is that the style is being overridden by the html style (sans-serif).

You just need to edit your css/bootstrap.min.css stylesheet and add !important to the line where you sent the font family to Roboto:

body{font-family:"Roboto",sans-serif !important;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}

Or add the Roboto font to your html style:

html{font-family:"Roboto",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

I also noticed you are linking to the Roboto font twice:

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css">

This will make the page display the font with the largest weight (700), which is different from the weight on the Home page (300). If you want to keep things consistent you may want to remove the first link.

jbern
  • 427
  • 3
  • 15
  • It looks like the css stylesheet with the roboto:300,400,500,700 is linked by the Google Maps API. If I delete the content of this css file the font is in its proper layout. Is there anyway to block this css file? – Jacob Notte Jun 20 '14 at 09:53
  • 3
    Oh, so that's what going on! The font isn't being replaced by your html font family, but rather by a font with a higher weight, imported by the Google Maps JavaScript API. Then you just need to add "font-weight:300;" to your body style and the page will look correctly. – jbern Jun 20 '14 at 10:04
  • 1
    On Ionic this problem blinks the view on Google Maps loading! Thanks! – Fernando Fabreti Jun 12 '15 at 03:51
  • @FernandoFabreti For Ionic, the issue is a different one. OP here appears to be explicitly using Roboto for his site (site now down). Our issue is probably caused by Google's downloaded Roboto font replacing the browser's sans-serif that initially renders as Arial. If I pause execution before Roboto finishes loading, that is what is listed under "Rendered Fonts". – Cloud Jul 28 '20 at 00:47
  • In `@ionic/angular`'s `core.css`, `html.md` gets `--ion-default-font` of `"Roboto", "Helvetica Neue", sans-serif`. Then, `html` gets `--ion-font-family` of `var(--ion-default-font)`. Finally, in `typography.scss`, `html` gets `font-family` of `var(--ion-font-family)`. But it seems I need to manually include the optimal MD (and iOS) fonts from some CDN myself to prevent Google's downloaded Roboto font from taking effect at a later point in rendering, causing a visible "flash" when text changes appearance. – Cloud Jul 28 '20 at 01:03
  • Seems [excessively complex](https://stackoverflow.com/a/32660790/11536796) to get my hands on Apple's San Francisco font at a glance. I am guessing, on actual mobile devices, the necessary font will be available. But it's not a major issue for me since I am not actually publishing any app, so I will not try to run things on an emulator. – Cloud Jul 28 '20 at 01:08