...

View Full Version : FF Font Rendering



Sammy12
02-13-2012, 03:36 AM
Browsers render font very differently in various browsers. My particular question is directed towards Firefox rendering Arial bolder than necessary. Are there any ways I could reduce this? Are there any fonts I can import that render more consistent across browsers?

Kevin_M_Schafer
02-13-2012, 05:32 AM
Hi Sammy,

I would just like to throw something out there to you to see if it's useful regarding your issue.

About a year ago, I realized FF didn't understand points measurement. I had always been using IE, then when I viewed my page in FF, the fonts were much larger and where one line used to be displayed for a headline, two lines were now being displayed -- if the line was close to being too tight already.

Does this add anything useful for discussion? I know we all use either ems or pixels for font size, but if FF had an issue with points, it may be well to guess that other issues with fonts exist. If we stop and think about it, if FF didn't understand points, but it still displayed the text, that means it defaulted to something -- pixels, I suppose.

Just thought I would share this in case it's useful.

--Kevin

.

Sammy12
02-13-2012, 10:22 PM
I am lost. the default is 16px. however the font is bolder in firefox http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/

The article is nice and all, but what can I do to "fix" this.

Kevin_M_Schafer
02-13-2012, 10:53 PM
Sammy,

Your URL doesn't seem to be correct.

--Kevin

.

Kevin_M_Schafer
02-13-2012, 11:23 PM
Your link works now.

Try an experiment with input boxes. The same thing holds true for them regarding FF. I always style them with width and height and apply a border, otherwise they're all over the place in different browsers.

If you have a chance, create an input box and view it in different browsers. It's amazing how different their lengths are.

--Kevin

.

Sammy12
02-14-2012, 01:05 AM
The lengths would be the same if you used a px width, with or without font rendering differences. I'm talking about the boldness of text, not inputs.

http://css-tricks.com/wp-content/csstricks-uploads/compound.png

My site looks terrible with FF's boldness. I usually let it slide, but this time it is too drastic. Especially with the 16px Arial Chrome. Chrome renders that amazingly, but in FF it is way too bold.

alykins
02-14-2012, 01:49 PM
have you considered making the weight lighter/smaller than what you *want it to be and then using js re-render the page?
You would retain your pages functional and then provided they have js on (which most do) it would render the page the way you want it (ie re-style the font based on the browser)

SB65
02-14-2012, 01:59 PM
On the page to which you link, the screenshots of Firefox are no bolder than those in anything else, as far as I can see.

Can you give a link to your page where you're seeing this problem?

I can't say I've ever noticed anything different as regards the boldness of fonts between browsers - certainly nothing akin to the level you describe.

Apostropartheid
02-14-2012, 05:27 PM
have you considered making the weight lighter/smaller than what you *want it to be and then using js re-render the page?
You would retain your pages functional and then provided they have js on (which most do) it would render the page the way you want it (ie re-style the font based on the browser)

Won't this basically make it impossible to select text, though? It seems unnecessary.

@OP: There's nothing you can really do. You generally can't--and shouldn't try to--mess with the client. Is there any reason that this is absolutely critical?

Sammy12
02-14-2012, 08:59 PM
The website is using some heavy rgba. In chrome of course, it is working well, but with ff and ie's terrible font rendering, it is looking very scrappy. The problem is magnified by the rgba background. I was wondering if I could emulate chrome's font type. I could target browsers as stated above, but I think my real question is are there any fonts that would not get murdered by ie or ff with respect to an rgba background? are all fonts rendered differently or are there some fonts .ttf or is it just arial?




sorry sb65, the site is private

SB65
02-14-2012, 09:06 PM
I'm still keen to see the page, if possible.

SB65
02-15-2012, 10:20 AM
sorry sb65, the site is private

Fair enough. I still cannot see any difference between Chrome and Firefox on a test page with an rgb background....maybe it's my eyes....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum