I have a bespoke font for a client which I converted into a webfont. All went fine, works on my mac and others across Firefox, Safari and Chrome, however when viewed using Windows, the font becomes extremely distorted and unreadable, on any browser.
Does anyone know what could be causing this? Could it be an issue within the original font or is there a code trick I can use to fix this?
It's a hinting problem. Microsoft’s rasteriser tries to align characters to whole pixel grid.
Read: https://www.typotheque.com/articles/hinting
Related
I'm sure this has been discussed before, but I can't find any canonical question / answer.
Currently, IE9 and Firefox 4+ both use different font rendering that produces (for some) more blurry fonts but overall better kerning and more consistent results. Also, it renders non-standard fonts on Windows much better. I've have not done a thorough investigation, but I think it has to do with the fact that both IE9 and Firefox use now a different graphics layer which in apparently renders fonts differently. Also, the reason some of the standard fonts such as Arial, Tahoma etc. look in Firefox the same as 10 years ago is that it actually has a list of exceptions for them (look for gfx.font_rendering.cleartype_params.force_gdi_classic_for_families).
So far so good. The problem is Chrome. It still uses the old font rendering that makes the non-standard fonts practically unusable. Just for illustration, the font I had in mind was: http://www.google.com/webfonts/specimen/Play. Just open the sample in Firefox/IE9 and Chrome and you should see the difference. Is there anything I can do? Or should I look for a more optimized font.
Update: I see it's a common problem: the headings on http://www.smashingmagazine.com look very jaggy in Chrome.
Update: Sample image:
I have read that Chrome (originally Chromium) has anti-aliasing issues that's why it's jaggy.
Using font-faces also makes a difference than using local fonts in your system. So, all we can do is just wait until they fix this issue or help the Chromium Project if you can.
Known issue. You can try gdipp or MacType.
Copying my anwswer from Making CSS3 #font-face font rendering play nice with ClearType on Windows
A similar question here: Font-face embedded fonts look fuzzy in Windows 7 browsers got an answer that solved the same issue for me.
The fontsquirrel font generator http://www.fontsquirrel.com/fontface/generator optimizes fonts and adds them with hinting/rendering info that helps the windows font rendering engine render them better. It also generates smaller files, which will download faster.
I have create a PNG arrow graphic for use in a client's website. It render's perfectly everywhere except in IE 6,7,8 and 9. I have attached an image for you to examine and have already tried 2 different IE png fix scripts - one jquery and one a css behaviour .htc file.
Please assist me.
Thanks
Jamie
Image: http://i51.tinypic.com/2w1uzqe.jpg
Sorry to say that but for 5 years i've been looking for 100% working hack for png transparency bug in IE's with no result. There are many of them and usually each of them doesn't work here and there.
Try using transparent gif instead or crop arrow image with background along. It will take few more bytes of White color so won't damage your performance that much.
The bug that IE PNG Fix scripts are designed to fix is only a problem for IE6 and lower.. hmm.. possibly IE7? I forget. In any case, IE8 fixed the issue, and IE9 definitely shouldn't have it. These IE versions may still have plenty of bugs, but the old well known PNG background issue isn't one of them.
My guess is that there may be a corruption in the PNG file itself.
My suggestion is to try loading the PNG image into Photoshop (or your favourite graphics app), and re-save it. That may be all you need to do to solve the issue.
Failing that, would you be able to give us a link to the actual PNG file, so we can have a look as well?
I have noticed this weird behavior in firefox, it seems like font have some colorful noise. The example is shown in the image.
Does anyone know how this can be solved? With some CSS media type (which now is screen)?
I'm using firefox 4.0.1.
Any help is appreciated.
You're seeing subpixel font positioning and rendering. I assume that you're on Windows, which is why you only see it with Firefox 4 (and IE9, if you try that). On Mac, Firefox has done this for a very long time.
First off, apologies if this is a simple thing, but I did a search here after googling and came up with nothing concrete: http://stackoverflow.com/search?q=[%40font-face]+print%2C+firefox
I have generated an #font-face kit with font squirrel with two licensed open type fonts. The demo works fine in all browsers except for 1 issue. I want the font to print, and it does for IE, but printing the document in Firefox 3.6.12 & Chrome 8.0.552.215.
Should the FS demo font be printable in FF and GC or is this impossible to do?
Thanks!
I don't think that this is currently possible in firefox, seems to completely disregard the fontface feature.
It's not just this though, seems to disregard background colour css (as do all apart from opera currently).
Spacing seems a little worse in firefox too, more bunched up.
Seems to have an issue with strong tags.
Been having a similar problem and starting to think the issue in with Firefox. A few things seem to point to it being a bug in the 3.6.13 version, but it is also possible that the font file has an invalid cmap problem as Firefox stopped rendering those as of 3.5.4.
More Info:
http://support.mozilla.com/ak/questions/769971
http://support.mozilla.com/sq/questions/761014
invalid cmap problem:
https://bugzilla.mozilla.org/show_bug.cgi?id=526869
Could someone go to this url: http://www.barbadostravelbuddy.co.uk/demo/?r=register
in IE8 and tell me what the submit on the bottom of the right hand column looks like, please?
I suspect my emulator isn't working correctly on this point of CSS.
It should have white text on a blue gradient but my emulator is showing with a white block. In IE7 (the real version) this does display correctly and it seems unlikely IE8 would regress.
IE8 result here :
http://img405.imageshack.us/img405/7784/screenie8.png
What emulator are you using? Would suggest you to use IETester. It uses the actual COM object of Trident (the Internet Explorer rendering engine) and hence seems quite reliable.