I have attached the image for what I am facing right now, there is a lot of difference between firefox for windows and firefox for mac, I have checked other browsers so far, Mac Firefox, Mac Chrome, and Windows chrome are showing the same results, but the firefox on windows is having different font.
I also have included the text properties by inspecting element via firebug.
Any idea why firefox for windows is having different font rendering? and How I can improve it. This issue breaks the whole layout for complex forms.
What I have heard, is that Firefox under Mac uses different font algorithms.
Try the following
html, body {
-moz-osx-font-smoothing: grayscale;
}
They are different browsers on different operating systems. Difference in font rendering is inevitable, and there's nothing much you can do about it.
I am unable to fix this, so my safe exit was using Arial Font. Verdana Font size 9 is like 10/20 and Arial is like 18/20 where first number is FF Windows and later number is Chrome Window
Related
Please have a look at this JSFiddle:
http://jsfiddle.net/tCeKm/
We are using a #font-face to embed the font Bitstream Vera Sans. On Firefox and IE, the font renders okay:
On Chrome 35 on Windows 7 however, there are some gaps between the Y character and the following one:
We're using the HTML5 Boilerplate CSS reset, so the differences are most likely a bug in Chrome or a problem with the font.
EDIT: In the Chrome screenshot (second image), the font appears to have a smaller weight. This is only because Stackoverflow scales the second image down since it has too much width.
Those "gaps" are missing because there is no kerning being applied to the font. You're likely using Chrome on Windows — Chrome on OSX will show your font properly kerned.
More info in this Typekit article:
Chrome on Windows does not support kerning at all, which is caused by their use of GDI for rendering text. Chrome will soon switch to rendering text using DirectWrite and should then also support kerning and other OpenType features on Windows Vista and above. Kerning is enabled by default in Firefox and Safari 7 (on both OS X and iOS).
I'm having some trouble with font's on cross-browser compatibility. FireFox and Chrome look virtually the same, maybe a bit smoother on FireFox, but on IE9 it seems condensed and a bit bolder? I've used every CSS value for font to try to set a default for every browser but nothing works. Any ideas what IE9 is doing to distort the font? I do like the way it looks in IE9 but I want it to match between browsers.
It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.
Microsoft says,
Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations
However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.
The font rendering is dependent not only to the browser but also the operating system.
Please see the following two articles which are explaining the difference and what you can do with CSS to overcome it:
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
So I'm front-end coding this flashy new start-up website and I am using a specific font. I am using #font-face, and the font shows in all browsers but some issues:
1) The font looks pixelated which makes it kinda ugly. This problem actually has happened to me before with other fonts so I will be happy if somebody recommends me how to get the font smooth.
2) In Opera and Safari the font renders normally (still pixelated) but in IE, Firefox and Chrome it renders bold, kinda bolder than normal. I tried putting font-weight but the font doesn't support any weight so it's normal. Any ideas on that problem ?
I really want this font and I can't understand how everybody is using font-face with all those rendering problems. I hope I am missing something.
Depends on what OS are you using since #font-face uses OS font rendering engine. On Windows XP just forget about getting it done right. Windows 7 does the job pretty much ok also in IE7/8.
One thing that can cause your fonts to look jagged can be the Cleartype options - turning it off fixes the edges since it won't do the extra anti-aliasing that is not needed since the embeded font is already anti-aliased.
One way to disable cleartype on the client side is to apply a IE specific filter: property (just use some simple property so it won't do anything except triggering the effect - like rotation by 0 degrees) to your headers in css - that causes IE to turn off cleartype to avoid conflicts between filter rendering and Cleartype rendering. But this will fix IE only.
There is also webkit specific -webkit-font-smoothing which works ok and might help you with chrome and css3 font-smooth (never used this one so can't tell you about results or supported browsers).
Most solid thing you could do, if you really want to keep your selected font, is to use Cufon or similar font replacer. From my experience it does the job with an extra script load.
Overall for #font-face there is no solid solution to get it look the same on all browsers and systems.
I'm working on an HTML page that needs to be more or less pixel-perfect, and I noticed that in Opera 10, fonts are rendering larger than they do in other browsers, even though the font-size is effectively the same.
Please see this example page in Opera 10 and another browser like Firefox 3.6:
http://troy.onespot.com/static/stack_overflow/opera_font_size.html
Alternatively, here's a screenshot that illustrates the issue:
http://skitch.com/troywarr/d47m1/font-size
The red boxes behind the "50px" and "46px" text (both styled to have the corresponding font-size) both have a height of 50px.
In Firefox 3.6, the descender of the "p" in "50px" lines up with the bottom of the red box behind it. In Opera, the descender of the "p" in "50px" hangs below; it's the "46px" that more closely matches the "50px" in Firefox. That suggests to me that Opera is rendering fonts in the ballpark of 10% too large.
This, and the same issue with other body text, is completely throwing off my page layout in Opera 10. Please let me know if you have any ideas about what may be causing this, or at least how to prevent/fix it.
Thanks!
UPDATE:
It appears that I don't have a proper copy of Helvetica installed - I removed it from the font stack and saw no difference in the rendered text on my test pages.
I updated the test pages to only use the generic "sans-serif" font-family, so hopefully we're all seeing the same thing now.
Interestingly, using the generic "serif" font displays exactly the same in Opera and Firefox.
Could this issue just be a quirk around how Opera displays the generic "sans-serif" font?
UPDATE 2:
This may be important: I'm using Mac OS X Snow Leopard. I'm experimenting with other fonts now to see if I can isolate the issue any further.
UPDATE 3:
I created another test page using Arial:
http://troy.onespot.com/static/stack_overflow/opera_font_size_reset_arial.html
And now Opera and Firefox match almost exactly!
I can probably get away with using Arial in lieu of Helvetica on this project. As far as I know, I have a completely stock OS X version of Helvetica - so I can't afford any disparity between how different users may be seeing the fonts on my page. I'll stick with the tried & true Arial.
What could this mean, though - does OS X's default sans-serif font just render strangely in Opera or something?
I came across this thread when I was having similar issues with Opera 11.10 on Windows 7 x64.
Opera was defaulting to using 20px as the body font-size (rather than 16px which is what other browsers use). This persisted even after uninstalling, deleting Opera preferences and re-installing. It turns out that Opera will honor your system font-size preferences
(set under 'Control Panel\Appearance and Personalization\Display' on Win7) for rendered website text whereas other browsers (I tested FF4, Chrome 11, Safari 5, IE 9) do not. My system font size was set to 125% which explains the 20px. Once I set my system font zoom to 100%, Opera behaved the same as the others.
I'm not sure which behavior is more correct (In a way, it's nice that Opera honors my font choice) but since since other browsers do not do the same, it is "unexpected". I don't have a Mac to test but perhaps MacOS has a similar system font preference?
I was having a similar issue.
I found that the default computed font size in FF and most other browsers on is 16px, but on opera the default seems to be 20px.
I simply set font-size:16px; for html, and it seemed to take care of it.
My suspicion is that Opera uses a different fallback font for Sans-serif than the other browsers do. That should be possible to confirm or eliminate by using a different font that is definitely installed on the system.
I'm not reproducing your problem. This is what I get in Firefox 3.6.8 (and in Internet Explorer 8):
I think I know your problem. I am getting it exactly the same size in all browsers (at least Firefox, Opera and Chrome). This, I am sure, can be easily overlooked if you dont know you or someone else has done this, but try checking the zoom settings in Opera... let me know if it doesnt help and I will work some more on it.
This is where a css reset stylesheet can really simplify things for you.
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
I had similar issue until I used reset CSS of Eric Meyer :)
Came across similar issues, had to change my fallback order
from:
font-family: Helvetica, Verdana, Arial, sans-serif;
to
font-family: Helvetica, Arial, sans-serif;
Since Arial and Helvetica are almost exactly the same size, when opera falls back it still looks good.
Since FixedSys won't display in Chrome or Safari I make it switch to Lucida Console. It works for Chrome but for Safari I run into an issue. Unless Lucida Console is by itself, it WILL be to the font I said. If not -- then it won't work.
Have a look at this picture:
I don't know what font the first Hello world! is but it's weird. It's weird because the default font on my Safari is Times New Roman. I have checked. Also, it's not in conflict with any other style because I have tried it by itself and the problem persists.
font-family's fallback feature works based on installed fonts: if you have FixedSys installed, Safari will attempt to use it. You mentioned that FixedSys "won't work" in Chrome or Safari: it could be that it's interpreting FixedSys incorrectly or that your FixedSys is corrupt.
As Safari 4.0 final was released in 2009, and the current stable release of Safari is 5, it's very likely that there was a problem in Safari 4 beta's font rendering code.
If you have a font installed, there's no way in browsers that support CSS correctly (Safari, Chrome, Firefox, later versions of IE) to say "fallback to the next font even if you see that I have the first font installed". Instead, you'll either need to resolve your issues with FixedSys (that is, upgrade to a stable version of Safari to see if it fixes it) or remove it from the font-family list.
A few other notes:
Lucida Console is not installed on most Macs, so if you're trying to be cross-platform, you need to provide a fallback (like monospace).
The CSS spec requires multi-word fonts to be enclosed with quotation marks. Your CSS should look like: font-size: FixedSys, "Lucida Console"
Does it work if you include quotes around "Lucida Console"?