I made a custom font for a set of icons using Inkscape and used the Free Online Font Converter and Font Squirrel to generate the different font types (woff, eot, ttf, svg) and the #font-face code for inclusion.
The font works fine in Google Chrome with the ttf, svg and woff-font and in Internet Explorer 7 and 8, but in FireFox 13 and IE9 certain icons do not get rendered. The other icons of the font do work correctly, so there is no problem with the file getting delivered. Also because the fonts work in Chrome, the conversion seems to have succeeded.
I think the problem has something to do with the type or shape of the icons I'm using, but I can't find anything in particular that differentiates these two icons from the others I have used.
The problem can be reproduced in my ASP.NET project, but also locally using the testfiles which Font Squirrel supplies.
Update: Still did not figure out the solution, but I found out that when the same TTF-font is installed in Windows, it does work in Firefox. But when it is referenced through #font-face, it does not.
Going to guess it has something to do with the fact that either your fonts or your font's CSS is not being called from the same domain. Both Firefox and IE9 enforce a Same-Domain Origin Restriction. Therefore do not use domains in your link tags or your CSS font-face code.
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
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 a good free desktop font and it is free also for font embedding on the web.
The font uses Arabic Unicode and it is TrueType desktop font.
I want to use this font on my website. The problem that most web font converters or generators like font squirrel and typeface.js render the letters separately, not linked together.
I used this Unicode ranges to create the web fonts:
FE70-FEFF,0600-06FF,FB50-FDFF,0750-077F,0621-0652
This should convert all Arabic Unicode characters and should make the letters linked together or attached together like what happen on desktop font but that does not happen.
Can I just use the desktop font file itself without converting it?
What is the difference between a regular desktop font and web embedded font?
BTW, the font desktop file is only 27kb and I tested it in Firefox. It is working great if installed on the system (of course it is on my computer).
Yes, you can use the ttf file itself. Most browsers, except Internet Explorer 8 and lower, support this format.
To support IE8 as well, you must transform the font into an eot file and upload that too. Can't really recommend any specific font converter, having no experience with Arabic fonts, but I'm sure there must be others except fontsquirrel. Have you tried FontForge?
Anyway, in my experience, font files downloaded and installed into the user's system work far better than web fonts, because font support from within the browsers is far from optimal. Some fonts work, others don't with no indication why, yet others don't display well (with the wrong spacing, or as if there is no hinting, etc).
So if you do use a web font, make sure you a) test thoroughly in many different browsers, and b) provide good fallback fonts in the css, in case your webfont doesn't work.
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