Menu
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
466
Change text size On your Android phone or tablet, open the Settings app . Tap Accessibility. From here, you can: Change font size: To make words larger, tap Font size, and then set your preferred letter size.
Google Maps now uses Roboto for labels.
Android 8.0 (API level 26) introduces a new feature, Fonts in XML, which lets you use fonts as resources. You can add the font file in the res/font/ folder to bundle fonts as resources. These fonts are compiled in your R file and are automatically available in Android Studio.
You could select all the children elements using . parent * and then set font-family to inherit . This will effectively override the child element font and force all children elements to inherit the value of whatever the closest parent element's font is. And if you only want to target the .
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.
180
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
