Solved

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

Posted on 2013-01-12
18
618 Views
Last Modified: 2013-09-20
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.
0
Comment
Question by:Balmong
  • 7
  • 4
  • 3
  • +1
18 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38771279
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
 

Author Comment

by:Balmong
ID: 38771501
I do have it insalled.
Here is a picture of how it looks:
ieff.jpg
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38772019
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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38772031
0
 
LVL 12

Expert Comment

by:junipllc
ID: 38772035
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38772122
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38772400
You should note that "Helvetica Neue" is primarily a Mac font, very few PCs will have it.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38772461
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
 
LVL 12

Expert Comment

by:junipllc
ID: 38772681
@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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38772700
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
 
LVL 12

Expert Comment

by:junipllc
ID: 38772770
@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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 38772776
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
 

Author Comment

by:Balmong
ID: 38781578
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38781720
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
 

Author Comment

by:Balmong
ID: 38781828
Just did. Same stuff.
0
 

Accepted Solution

by:
Balmong earned 0 total points
ID: 38786174
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question