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
Related
Yesterday a colleague of mine noticed a big inconsistency between the rendering of the google Roboto Condensed font on our site, when displaying on Firefox and Chrome. On Firefox the font doesn't seem to be the same at all.
I did some reading here on stackoverflow, but I can't seem to understand if this problem is the same as mine, because the person is using local fonts, and I'm serving directly from google.
Also it seems like somewhere in the wordpress installation, the Roboto Condensed font is being called twice - once imported directly from the theme, once imported by a plugin we're using to customize the menu of the site.
On the other hand, I read that different font weights being used on the same font might produce different results in different browsers, but couldn't grasp what is the right way to use them.
Any help will be appreciated. Here is the site that I'm talking about:
www.podmosta.bg
Best Regards,
Kostadin
This is resolved now.
Turned out that I wasn't loading Roboto Condensed with included cyrillic characters included. Just loaded up the proper version of the font and everything went fine.
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
(Sorry for my poor English)
Yesterday, I encountered a problem when using #font-face with a really large font-size (200px): one of my div rendered differently in Firefox and Chrome. After doing some research, I learned that it was due to Firefox and Chrome calculated line-height differently, and a specified line-height could solve my problem.
BUT, to my suprise, even if I did nothing, when I start FF in safemode, the problem solves itself! (it renders similar to Chrome) So I wonder that's because I've customized FF too much? I creat a new profile (no addon, disable all plugin, reset all settings to default) but the newly created profile works the same like my old profile, and different with FF in safemode. I don't understand it?
Safe mode, in addition to turning off all add-ons, also turns off the JIT and hardware accelerated rendering.
And if you're on Windows (which I assume is the case given the described behavior), then turning off hardware-accelerated rendering also turns off DirectWrite rendering of text and uses GDI instead.
But DirectWrite and GDI end up with different font metrics for the same text: for one thing DirectWrite can do subpixel glyph positioning, and GDI cannot. So if you turn on safe mode, line heights and various other aspects of text layout can change.
Note that Chrome uses GDI to start with. IE 9 and 10 on the other hand, use DirectWrite, so it's worth testing how your page behaves in those; I'll bet it's similar to Firefox not in safe mode.
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 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.