Question

I’ve encountered a problem using @font-face while building a website.
The font’s installed on my PC, I’ve downloaded it from fontsquirrel.com.

If I use the version that’s installed in my PC (Journal), all is well as you can see from the following screenshot:

_{(source: valeriobulla.it)}

However, as soon as I switch to the @font-face version, the letters’ tracking (expecially Ts) is different and looks broken:

_{(source: valeriobulla.it)}

Here’s the code for the @font-face (font-face kit downloaded from font squirrel):

@font-face {
font-family: 'JournalRegular';
src: url('journal-webfont.eot');
src: url('journal-webfont.eot?#iefix') format('embedded-opentype'),
     url('journal-webfont.woff') format('woff'),
     url('journal-webfont.ttf') format('truetype'),
     url('journal-webfont.svg#JournalRegular') format('svg');
font-weight: normal;
font-style: normal;
}

And here’s the item (a div) styling:

#assignment-text {
font-family: Journal, JournalRegular, serif;
font-size: 3em;
text-align: center;
width: 340px;
position: absolute;
top: 200px;
left: 320px;
color: #000;
}

Using Journal everything is fine on my PC. Forcing JournalRegular (by commenting Journal) breaks spacing.
I am developing in local. Tested in:
Windows 7 PC (with font installed): Firefox 7, Chrome, Opera, IE9.
Macbook (without font installed): Firefox, Safari.

Is this a known issue? I’ve searched but I can’t seem to find a solution.

Answer 1

I’ve had similar problems with fonts I converted on font-squirrel. One of those times, going back to the generator and playing on the expert options, notably “Remove Kerning” solved it.