Search code examples
cssfontsgoogle-font-api

Google fonts different size and jagged

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!

Solution

  • 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.