BrowserStack Analysis of Google Web Fonts
As the number of devices available for accessing web pages proliferates, web based fonts are becoming increasingly important to ensure consistent font styles. A good open source solution for web fonts is the Google Fonts library, but nothing is perfect, and even with best practice web design we're observing niggly quirks in how these fonts render.
Explanation of Quirks
Here are the main quirks we're coming across:
- The <br><br> problem. This is where two consecutive <br> instructions seem to get merged and don't produce an extra line break. Although its not pretty HTML to use in the first place, there are times when it gets used.
- Faux italics. Even if you load a font file including properly designed italics, the browser sometimes gets confused and retrieves only the normal style to which it applies a slant to fake an italic style. This is usually quite ugly compared to the genuine italic
Quirks Observed by platform
| Google Font | Quirk | Comment |
| Crimson Text | XP IE6: no BRBR without adding XP IE7: no BRBR without adding | |
| Vollkorn | XP IE6: faux italics, no BRBR without adding XP IE7: faux italics, no BRBR without adding Win7 IE8: faux italics | |
| Lora | No Issues | A very useful serif font, with nice rendering and good hinting |
| PT Sans | No Issues | A nice reliable sans font |
| Cabin | No Issues | A nice alternative to gothic sans |
Additional implementation notes
If you're trying to replicate the issues we're seeing, you'll need to know the environment we were using. This was on an HTML 4 page rendering in standards mode. Also to avoid additional italics issues, we implemented the IE7 / IE8 Faux fonts fix as documented in Smash Magazine.