I made the mistake of designing a page with a font I liked without testing the rendering of that font first. After using the @font-face rule, I noticed that all of the browsers rendered the font at different sizes and they all had very messy edges and character spacing.

I really like the aesthetic and size of the font in Photoshop, so is their a semantic alternative to using a font that not all users will have installed? I know I could use images, but the font is being used for my h1, h2, main nav, and footer nav.

Originally Posted by RDay26

I made the mistake of designing a page with a font I liked without testing the rendering of that font first. After using the @font-face rule, I noticed that all of the browsers rendered the font at different sizes and they all had very messy edges and character spacing.

I really like the aesthetic and size of the font in Photoshop, so is their a semantic alternative to using a font that not all users will have installed? I know I could use images, but the font is being used for my h1, h2, main nav, and footer nav.

That's all you've got to work with unless you use an image.

The font should just be reading and rendering as the standard raw font file, maybe in photoshop you modified the text a bit? There is a lot things you can do in Photoshop that modifies the text.

link to the page would help illustrate the problem - and show how you've used @font-face

@vultren: The only editing to the font done in Photoshop was the anti-aliasing.

@davmie: This is all I've done with @font-face:

@font-face {
font-family: swiss721;
src: url(../webfonts/swissck.ttf), url(../webfonts/swissck.eot);
}
h1 {
font-family: swiss721;
font-size: 265px;
line-height: 215px;
margin: 0;
padding: 10px;
float: left;
}

It isn't working for IE unfortunately and I uploaded the index to an old domain. I can't post links until I've posted 10 times on the forums but the domain is daylidesign.com. The h1 ("CRE8IVE") and the main nav are using the font. The h2 ("DESIGNER") is an image for now. The rendering looks better on Macs and in Firefox on PCs.

I can live with the rendering of the nav, but with the size of the headers, the current rendering isn't going to cut it.

hmm when i use fontsquirrel i get something like:
@font-face {
font-family: 'Museo300';
src: url('type/museo300-regular-webfont.eot');
src: url('type/museo300-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('type/museo300-regular-webfont.woff') format('woff'),
url('type/museo300-regular-webfont.ttf') format('truetype'),
url('type/museo300-regular-webfont.svg#Museo300') format('svg');
font-weight: normal;
font-style: normal;
}

you could try using uploading the font to their font-face generator http://www.fontsquirrel.com/fontface/generator - that should at least make it work in IE.
font looks great in firefox (win 7) and crap in chrome (chrome on pc is **** though for font rendering). macs have better font rendering generally than pc (afaik)

Wow thanks! I used font squirrel's generator and the font is working in IE now. It even cleaned up rendering

great!