Google fonts different size and jagged

Question

I have one very surprising issue with Google Fonts. This is the site in question.

The title is normaly showing in one ligne but a friend of mine with the same Opera version like me sent me this screenshot. You can see that the title goes in two lines and brakes every think.

It's the first time I use Gfonts and must admit that there is another problem in Firefox too - the font appears so jagged!

Thanks for your advises!

Answer 1

The line break can be prevented simply by adding

h1 { white-space: nowrap; }

Font rendering depends on the font, on the font size, on the browser, on the operating system, on the device, their settings, and probably phase of the moon, too. Some fonts are more difficult than others, so the practical move is to pick up another font.

Answer 2

Unfortunately, not all browsers render all fonts exactly the same way. I guess your problem with the title in Opera is caused by the font being rendered bigger. You can try to target a specific stylesheet for Opera to solve that.

As for the jagged font, well... you have to deal with that, and choose fonts that will look sharp on every browser.

Take a look here : http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/

Answer 3

The jagged issue was solved thanks to this Joomla! extention - KC Cufón Font Replacement. A have included just the characters of my text - only 3KB of js and I left the same Google Web Font loading too in order the text to be shown until the extention loads.