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:

  1. Open http://gipf.bitvolution.com/how-it-works in both Chrome and Firefox (side by side).
  2. Find the "Ten Stages of the GIPF Process" h3 element
  3. Notice it is bold in Firefox but not in Chrome

3 answers

1
point
This was chosen as the best answer

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.

Answered about 4 years ago by Tom Fotherby
  • Thanks for taking the time to file the bug AND report the workaround back here! Doug about 4 years ago
Doug 1095
2
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.

Answered over 4 years ago by Doug
  • Thanks. Just for interest - how did you determine the font doesn't have a bold-face version? What tools did you use? Tom Fotherby over 4 years ago
  • 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. Doug over 4 years ago
  • I submitted a bug: http://code.google.com/p/chromium/issues/detail?id=31833 . Lets see what happens Tom Fotherby over 4 years ago
0
points

Have you tried using weight units instead? Like 500, 700 or 900?

Answered over 4 years ago by Jens Hedqvist
  • 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). Tom Fotherby over 4 years ago