I have a <h3> element which is styled with font-weight:bold; but it is not being displayed as bold in Chrome (v 4.0.249.43 Linux) whereas it is fine in IE and Firefox. The text uses a font called "GriffosFont" via @font-face.
I assume the problem is either a bug in the @font-face rendering in webkit or a bug in the font files I have used. I have specified woff, ttf and svg formats of the font - perhaps Chrome is using one format (where the bold is broken) and Firefox is using another (where the bold is working)? Is there a easy way to tell which format the browser has chosen to use?
If you think it's a browser bug, please let me know so I can file a bug report.
To reproduce issue:
- Open http://gipf.bitvolution.com/how-it-works in both Chrome and Firefox (side by side).
- Find the "Ten Stages of the GIPF Process"
h3element - Notice it is bold in Firefox but not in Chrome
3 answers
point
Wow, submitting a bug report (http://code.google.com/p/chromium/issues/detail?id=31833) really works! A Chrome developer is now chasing the issue up and has given me a temporary workaround.
Temporary Workaround: To enable the font-weight property on a @font-face font which doesn't have a bold font defined, you need to explicitly define font-weight:normal; and font-style:normal; in the @font-face definition. Example:
@font-face {
font-family: 'GriffosFont Regular';
font-weight: normal;
font-style: normal;
src: url('fonts/GriffosFont.eot');
src: local('GriffosFont Regular'), local('GriffosFont'), url('fonts/GriffosFont.woff') format('woff'), url('fonts/GriffosFont.\
ttf') format('truetype'), url('fonts/GriffosFont.svg#GriffosFont') format('svg');
}
It's kinda funny that to allow a bold style you have to specify font-weight:normal; but it should be fixed eventually.
- Thanks for taking the time to file the bug AND report the workaround back here!
points
The font you've chosen does not have a bold-face version. On my computer, neither FF (3.5), Chrome (3.0), nor Safari (4.0) show that font in bold anywhere. IE8 and FF 3.6beta5 show bold, but it's a pseudo-bold (the normal font with thickened strokes).
It's just a difference in browser capabilities. Switch to a font with a bold face version and all the font-weight rules work as expected.
Update
Just as an example for comparison, Bergamo Std comes in four styles: regular, bold, italic, and bold italic.
- Thanks. Just for interest - how did you determine the font doesn't have a bold-face version? What tools did you use?
- Just look at the page where you got the font. There is a little drop-down box to show all the different styles. GriffosFont comes in two styles: regular and small caps. Keep in mind that if you want to add multiple styles to your @font-face, that will increase the download weight.
- I submitted a bug: http://code.google.com/p/chromium/issues/detail?id=31833 . Lets see what happens
points
Have you tried using weight units instead? Like 500, 700 or 900?
- Thanks for the suggestion - I gave it a go just now. All as expected in Firefox. But Chrome completely ignores the weight unit - whatever I put, it renders the same (i.e. normal, not bold).
