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

I am trying this font in drupal with @font-face:

Amirifont.org

Any idea about why the font is messed up in every browser other than IE? I tried accessing the website on my Android phone and it displayed just fine.
BalmongAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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?
0
 
BalmongAuthor Commented:
I do have it insalled.
Here is a picture of how it looks:
ieff.jpg
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
0
 
junipllcCommented:
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 */
}

Open 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
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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;
}
0
 
Dave BaldwinFixer of ProblemsCommented:
You should note that "Helvetica Neue" is primarily a Mac font, very few PCs will have it.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
 
junipllcCommented:
@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
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
 
junipllcCommented:
@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
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
 
BalmongAuthor Commented:
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?
0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
BalmongAuthor Commented:
Just did. Same stuff.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.