Solved

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

Posted on 2013-01-12
18
612 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
 
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 82

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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 82

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now