@font-face fonts showing unexpected font-weight & margins/paddings

[sethen]

Hey all,

Long time listener, first time caller.

Just got into the HTML5 boilerplate and it rocks!

Converted a font to an @font-face kit for a new project and threw it into an H1 tag. I had a few unexpected things happen:

1. When converting, the @font-face rule gets a font-weight of normal. This may work in Safari and Chrome but it does not work in Firefox (version 10.0.2). I remedied this by putting a font-weight of normal on the actual h1 tag itself.
2. For some reason, @font-face type gets an unexpected margin/padding on the top and bottom of it... It looks like it's around 10px. Firebug shows me the margin/padding, but I don't see it being inherited from anywhere. I dug through the style.css and I can't find anything that would give it that unexpected margin/padding. It wasn't the font itself because I tried four of them and I got the same results no matter which one I used. However, when using just a regular h1 tag without a @font-face font assigned to it, it showed me what I would expect to see... A heading tag with a font-weight of normal and no margin/padding added to it.

I didn't want to keep throwing these things on every single heading tag I have though, so in the style.css I added this for good measure:

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }

This did the trick.

Anyone have any idea what's going on?

[necolas]

Please can you put together a reduced test case so we can see what the problem might be - https://github.com/h5bp/html5-boilerplate/wiki/contribute. Thanks!

[sethen]

Here is a reduced test case on our server: http://wearelaunchbox.com/issue1006/

For some reason I am getting the margin/padding on just a normal h1 tag now too. Maybe I overlooked it the first time. Is there something I am missing with this??

Either way, if you look at the @font-face tag in Safari and Chrome, it's business as usual, but in Firefox, you get an added font-weight of bold. As I said, this is remedied pretty simply by taking the font-weight off of the @font-face rule and adding it to the heading tag.

[nimbupani]

The font-weight font descriptor in @font-face is to indicate what font-weight that font is supposed to be.You have indicated that it is supposed to be used as font-weight normal.

h1, h2, by default have font-weight set to bold. Given your web font is defined to be font-weight normal, it means browsers need to find a bolder version of your font to use for these headings. Now, there is no another font-face rule that defines a bolder version of your font.

This means all browsers attempt to fake the bold weight themselves. This is done inconsistently as your example shows, which means Opera, Webkit, Gecko all look very different when fake bolding is applied.

The solution to your problem is to either do font-weight: normal on all selectors that are going to use the semi-bold, or use font-weight: bold on the @font-face descriptor so it will always be applied as bold on all selectors the font is used in, regardless of the actual font-weight defined in these selectors.

For anyone interested here is a testcase: http://jsfiddle.net/nimbu/wcBmD/

[sethen]

Thanks for the explanation.

What about the padding and the margin that is being applied to the heading tags?

[nimbupani]

I cant see the change in padding or margin in your test case. Do you have another one?

[sethen]

http://wearelaunchbox.com/issue/

This was just downloaded from the HTML5 boilerplate site and I just added an H1 tag with some text. I am wondering why it's giving me that extra padding and margin?

If you can't see it on your system, I can send a screenshot of what I am looking at.

[nimbupani]

It is not "extra" as much as it is browser default? We are using Normalize, @necolas wrote a good post on why this is a better way forward: http://nicolasgallagher.com/about-normalize-css/

[necolas]

Yeah you're going to have to customise the margins based on your design.

[sethen]

Ahh, I guess I was under the impression that a reset css was included with the boilerplate.

Thanks!