Spaces disappeared

Question

For some reason, the spaces between words on a font that I am using disappeared. See: http://www.fantasynews.com/ I'm using Twitter Bootstrap slightly modified to use Google Web fonts. The font in question is Oswald served up by Google web fonts: http://www.google.com/webfonts/specimen/Oswald And the spacing appears normal for me there.

I'm no CSS guru, but I have touched nothing in my code that should alter the way spaces are displayed. I don't know of anything that should target spaces in particular. I feel like this is some dumb mistake that I'm overlooking but I'm clueless. If I view the source, the spaces are clearly there as well as the spaces clearly being there when I inspect the element, in case some bit of javascript was playing a trick.

I am using the latest version of Chrome, although this also appears in Firefox.

I should say that the spacing problem appears specifically for the title in the boxes under latest player news

Answer 1

I forced it by adding word-spacing: 0.25em to my CSS, but I'm not yet 100% sure that fixed it in every browser. It's unfortunate that Google doesn't have an obvious way to link to a particular version of a font so you could be confident it won't change from under you.

Answer 2

Removing font-weight: normal; fixes the spacing (there are 2 instances being applied to it, Inspect Element and you will see them)

EDIT: This is a bad font, you should choose another one! It looks fine bold, but the normal version is awful.

Answer 3

Same problem here, i applied another font to the online website and pray for a solution :(

It may be a wrong encoded file on google's servers. Nobody's safe from minor issue like these, even the guy who encode typos in the webfont service.

Answer 4

I usually use Firefox(newest) for Ubuntu 12.10. Everything looks fine there. In Chrome however, your fonts are most definitely squished. I personally would choose a different font that renders more consistently. If you want to learn more check out Mozilla's MDC Kerning page to get started.

The main way that I use kerning is with the letter-spacing property.

h2 { 
 letter-spacing: -0.1em;
}

To say that this addresses "kerning" would be false. This actually affects "tracking". The only difference between the two is that kerning is the relationship between two character and tracking relates to a block of text.