Different font width on chrome browser

Question

Some text on my site is oddly broken into two rows on Chrome. On FF and IE it fits nicely in a single row. I've read browsers may each have their own way of rendering fonts. Is there a way to fix this?

HTML:

<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<div class="text-centered span3">                        
    <p>Wnii tagfF rouirsoSan olwre.i dlyrbr peato.</p>                       
</div>

CSS:

.span3 {
    width: 240px;
}
p {
    font-family: 'Signika';
    font-size: 13px;
}

Link to fiddle: http://jsfiddle.net/yishaib/Qqgxt/

*Obviously, I've scrambled the text.

Answer 1

There is NO way to make a font be displayed identical cross-browser / cross-os.

Typekit published an article about the subject : http://blog.typekit.com/2010/12/17/type-rendering-review-and-fonts-that-render-well/ and http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

Every great web browser has a layout engine that explicitly decides how to turn our markup, stylesheets, and scripts into living, breathing websites.

Now, if you try to display a font wich is NOT installed on a computer, the browser will try to degrade the rendering to show some font 'the browser' will choose. Mostly deciding from 'serif' - 'sans-serif' - 'monospace'.

If you link your font like an external source (typekit - googlefonts - etc) with @font-face, browsers will render what they get has ressource. Keep in mind that any browser will 'display' your content (let's say an image) the way they do.

An image won't have the same colors from browsers to browsers, caused by render-engines witch have to deal with 'pixels, pixels depth, resolution, language, and thousands of elements) Retina anyone ?

Answer 2

It's a lost cause trying to get fonts to render the same across all browsers as they use different rendering engines.

In your case however, you can tinker with the letter-spacing. It's not ideal, but I can get the text to stay on one line in Chrome by setting the letter-spacing to -1px.

CSS

p {
font-family: 'Signika';
font-size: 13px;
letter-spacing: -1px;
}

Answer 3

I have checked in Chrome and I've solved this problem:

I've used @import, no link ref.

Check my Fiddle:

http://jsfiddle.net/Qqgxt/12/

@import url(http://fonts.googleapis.com/css?family=Signika);

Answer 4

Yup, font rendering can be a big issue and is generally difficult to fix. Your other issue could be that "Signika" is not a web font recognized by google chrome. Try importing the font file through google fonts, if they have it.