click here symbol
button faded

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 FontQuirkComment
Crimson TextXP IE6: no BRBR without adding &nbsp;
XP IE7: no BRBR without adding &nbsp;

VollkornXP IE6: faux italics, no BRBR without adding &nbsp;
XP IE7: faux italics, no BRBR without adding &nbsp;
Win7 IE8: faux italics

LoraNo IssuesA very useful serif font, with nice rendering and good hinting
PT SansNo IssuesA nice reliable sans font
CabinNo IssuesA 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.
Contact Us

If you'd like to speak to a Griffen Mill Pixel Factory designer, please go to our Contact Page for more information about how we work.

Latest on Twitter

We haven't set up our own Twitter account yet, so in the meantime why not take a look at what our strategic partner WebHealer is up to.

New Stuff

We've been thinking hard over the Summer about how we can help more PHD Interactive clients get access to high quality unique design without incurring the costs that tend to accompany bespoke design. There is our Silver Design service of course which is very popular and costs only 39 but PHD Interactive challenged us to come up with something else - something even better!

And so we have. We are putting finishing touches now to our Silver Gallery service. The Silver Gallery is a collection of pre-made designs, each created by an experienced designer. Clients will be able to preview their PHD Interactive website using any of these designs and choose the one they like best. Each design will be unique so once it has been chosen and paid for, no one else can have it. The cost? All we can say for now is that you will like it.

Recent Client Work

“I felt from his response to my very first email that David understood my vision with regard to the upgrade of my website. He promptly provided comprehensive information on choice of images and the colour theme. My much improved website went live within a few days. David is extremely professional in his approach and I am happy to recommend David’s services without hesitation. I love the new look of my website!” See full case study