Font is jagged in every browser other than IE9 in Windows 7. Why is that?

Usually it is the opposite.  The fonts look good in mobile and macs and not as good on a pc and worse on a pc with ie.

By any chance do you have the font loaded on your computer?

If you look at their screen shots http://sourceforge.net/projects/amiri/ does this look like your site or better?

I do have it insalled.
Here is a picture of how it looks:
ieff.jpg

That may be the reason it looks better in ie.   It could be using your installed version of the font.   Can you find the same font from a different provider?  If you look at the link I posted, they have screen shots of the font.  Those screen shots do look a little bitmapped.

When I view their site on my mac from both chrome and firefox, it looks ok.  But when I go to the pc it does have a little more bitmapping.

If there is a common font that your audience will have installed for this type face, you can use a fall back where you start out with whatever that typeface is and then if not loaded fall back to this font.  What will happen is if it is installed, the browser will use that and it will look better.  Otherwise use the @font-face.

Here is some info on using @font-face that may help

fall backs

Drupal @font-your-face

http://www.html5rocks.com/en/tutorials/webfonts/quick/

Are you using all of the file types in your @font-face definition in your CSS file? It should look something like this:

@font-face {
  font-family: Amirifont;
  src: url('Amirifont.eot'); /* IE9 Compatibility Modes */
  src: url('Amirifont.eot?') format('eot'),  /* IE6-IE8 */
  url('Amirifont.woff') format('woff'), /* Modern Browsers */
  url('Amirifont.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('Amirifont.svg#svgAmirifont') format('svg'); /* Legacy iOS */
}

Select allOpen in new window

@font-face does not require that you have the font installed on your machine. That is the point of @font-face and other web font technologies. Good luck!

Mike

This is what I am referring too  https://developer.mozilla.org/en-US/docs/CSS/@font-face

You can spec a local font.  That will show up the best.

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

You should note that "Helvetica Neue" is primarily a Mac font, very few PCs will have it.

You should note that "Helvetica Neue" is primarily a Mac font, very few PCs will have it.

It's just sample code.  The font the OP wants is not a font you would normally have anyway.  The idea is to spec the font a user of this language would probably have locally and try and call that font first locally then fall back to the font loaded from the site and probably a 3rd fallback would be something standard just in case.

@font-face is not intended for use with fonts installed on your computer. From Wikipedia's page regarding Web typography:

Web fonts allow Web designers to use fonts that are not installed on the viewer's computer

http://en.wikipedia.org/wiki/Web_typography

Out of the competing "technologies" such as sIFR, Cufon, FLIR and @font-face, @font-face won acceptance. However, with @font-face, things aren't 100% straightforward...unless.....

There are so many browsers and devices (think mobile, as well) that sometimes it's just best to leave it to the experts that do this every day, and keep up with the latest tricks and techniques. My suggestion here is to go to FontSquirrel, upload one of the formats of the font, and then download the font kit it produces. Note that in order to use a font on the Web, you need to have a license to do so.

Also, take a look at this:

http://paulirish.com/2010/font-face-gotchas/#smiley

If you follow those (and these) instructions, your fonts should show up beautifully for all browsers, on all platforms.

I hope this helps.

Mike

Mike if you look at your link for paulirish, it is showing exactly what I am talking about.  Let's focus on this special situation and not the general population like we normally would.

@padas, apologies, I was answering the OP's question, although I disagree with your answer. I do not feel this is a special situation, nor do I think a (perhaps valid) local reference is a good idea. Note on the paulirish section I referenced that he is using a smiley 2-byte character. As I haven't seen the OP's actual code, I can not offer specific advice other than what I've already offered.

There are many versions of the "Bulletproof" @font-face technique. I prefer to use the most recent. These techniques are updated and improved constantly. Even the link I posted above is outdated. That brings me to my main point:

Just use FontSquirrel, a site dedicated to just this situation, to create the font kit from one of the local font files. They are well known in the industry, they keep up with current trends and techniques, and they know their craft very well. That will all but guarantee a good result.

Mike

I have  used FontSquirrel and everything still looks good on mac and not as good on pc a little worse on ie 9 and worse on ie 8 and below.    

All here are good possible solutions.  Just try them out and see what works the best. Sometimes it is just the font which is the reason for my suggestion.

I remembered that I only uploaded the rue Type format to @font-face, so I went and deleted that and downloaded an updated version of the font from its website, unzipped and found .woff and .eot versions but no .svg

Uploaded those with the .ttf but nothing changed.

The font a 'Amirifont.org' looks as bad as the one I uploaded to Drupal. I checked it on both Ubuntu and Mac Pro and both displayed it just fine. I think it is  a windows 7 issue, what do you think?

If you downloaded the fonts from the link @padas showed above, in the 'web' directory is the CSS file and all the web fonts so you can upload them directly to your site.

Just did. Same stuff.