font weights differing in webkit and firefox
I've had luck with this in the past for pesky webkit fonts displaying bolder than intended:
-webkit-font-smoothing: antialiased;
I would also recommend using a CSS @font-face to display Helvetica Neue fonts. Helvetica Neue is not on all computers and operating systems by default. Hope this helps! :)
Same font except its weight seems different on different browsers
Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.
Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.
UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.
However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:
- Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
- Using images (resources are demanding and hard to maintain)
- Replacing Flash (need some programming and doesn't work on iOS)
UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:
text-rendering: optimizeLegibility;
More references here:
- Part of the font-rendering is controlled by
font-smoothing
(as mentioned) and another part istext-rendering
. Tuning these properties may help as their default values are not the same across browsers. - For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.
CSS - Fonts Render Differently in Firefox and Chrome
I have been testing a few things out, and I've found some way to make sure that Firefox doesn't show an inconsistent font weight.
I can use some jQuery to detect the browser, and from there I can add browser-specific styles. In this case, I've added a font-weight to the title block so that it has a lighter font-weight, which creates a cleaner look:
On the left is Firefox with font-weight: 400
, and on the right, Chrome with font-weight: 600
. See below for my browser-detecting jQuery.
if (navigator.userAgent.search("Firefox") >= 0) {
$('body').addClass('firefox');
}
My CSS is as follows:
body.firefox h1 {
font-weight: 400;
}
It's not necessarily a fix, however it removes the choppy-ness of the font weighting.
Please feel free to comment about any better ways of doing this, or with a more practical solution to the question.
Many thanks.
Why is Firefox Selecting the wrong font weight from my font-face options?
As pointed out in this answer, it looks as though Firefox uses the last declared @font-face
for a given style to display the content. The last face I had defined for the normal
style had a weight of light
, so that was the one Firefox used. The solution is to use the numeric weights in the @font-face
declarations, as I have now done here. Then it properly uses the normal weight where appropriate.
Fonts looks different in Firefox and Chrome
css reset may fix the problem, I am not sure .
http://yuilibrary.com/yui/docs/cssreset/
CSS font difference in Firefox and Chrome
The browsers don't all support the same font display features yet, unfortunately. If you only use the basics, the fonts will look the same across browsers.
div { font: 14px/20px 'Arial', 'Liberation Sans', 'Helvetica Neue', sans-serif;}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
Related Topics
Preserve 3D Not Working on Ie11
IE9 Not Applying Linked Style Sheets
Whitespace Preservation in Less Escaping for Calc Operands in CSS3
How to Have Slanted Box-Shadows Using Only CSS
Mozilla 3.0.8 and Chrome Height in Em Bug Workaround
Remove Borders of Input Jquery Mobile
How to Manage My CSS as Modx Resources
How to Make Padding:Auto Work in CSS
How to Render Bootstrap Dropdown Above the Object
How to Write A:Visited in Inline CSS
Stop Link's :Before Content from Being Underlined by Rule Applied to the Link
How to Place The Cursor (Auto Focus) in Text Box When a Page Gets Loaded Without JavaScript Support
How to Get Floating Divs Inside Fixed-Width Div to Continue Horizontally