reason a font face would appear different as heading vs. normal text

Question

Okay I have a font-face that I am using as part of a website (just for nav. and a header/logo) here is a link to the font file http://www.dafont.com/bad-grunge.font (I typically would never use something like this but client insists)

Now The strangest thing is happening and I did some googling for a reason but came up blank and am curious if anyone can explain why the browser is rendering the font much differently as a heading rather then just normal text here is an example proving the bug Any explanation as to why this is happening would be awesome (I clearly no my semantically incorrect solution) but why is this happening at all? ... I have checked on latest versions of both firefox and chrome any explanation or theory would be greatly appreciated

soooo verbose.. show us code plz – ddoor Nov 24 '13 at 05:04 — ddoor, Nov 24 '13 at 05:04

score 1 · Answer 1 · answered Nov 24 '13 at 05:06

1

On Chrome, the only differences I am seeing are a result of the bold font-weight applied to the tag via the user-agent default h1 CSS styling. If I set the font weight to normal, they look the same.

The bold styling comes from the default for the tag. If you use a reset css, it would not look like that. This is the one I like: http://meyerweb.com/eric/tools/css/reset/reset.css

Or, you can just do this to fix it:

h1 {
    font-weight: normal; 
}

answered Nov 24 '13 at 05:06

delta88

31
4

thanks ... excepting the other answer as says same thing posted slightly before you but give ya an upvote as welcom to community – brendosthoughts Nov 24 '13 at 05:11

score 0 · Accepted Answer · answered Nov 24 '13 at 05:04

0

You're using h1 tag for your header for default it has this property

font-weight:bold

If you change this in your css then it will render as the normal font:

h1 {
   font-weight:normal;
}

answered Nov 24 '13 at 05:04

DaniP

37,813
8
65
74

reason a font face would appear different as heading vs. normal text

2 Answers2