Menu
I think I have found a web rendering bug for Google Fonts in Mobile (iOS 8) Safari. It seems to me that Mobile Safari adds a tiny bit of letter-spacing to all text that uses Google Fonts, or that it uses another font. It doesn't matter which Google Font I try (Open Sans). It renders correctly on all modern browsers. Tested Android, FF, Chrome, Safari.
Try to load this page on a iOS device to see what I mean. See also see code and screenshot. See this link for live review: https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html
<!DOCTYPE html> <html> <head> <title></title> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> </head> <body> <h2 style="font-family: 'Roboto'">Roboto: Looks like it gets a bit extra line-spacing in iOS Safari, though this is not possible to find in web inspector</h2> <h2 style="font-family: 'Arial'">Arial: Works fine in iOS Safari</h2> </body> </html>
341
The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text.
I found the solution in this question: iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug
Mobile Safari is buggy rendering faux font weights, if you don't set the font-weight (to eg. font-weight: 400 or font-weight: normal) You need to specifically set the css font weight for it to render correctly in mobile safari.
This is the solution.
h2 { font-weight: 400; }Note that Google Web Fonts only exports the regular weight (400) by default, which can lead to Mobile Safari (and other browsers) being forced to impose faux bold.
To explicitly export bolder weights, select "CUSTOMISE" in the Google Web Font font selection pane, manually check each additional weight you require, and use the updated embed code.
)]1
31
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
