CODEWITHSUNDEEP
htmlcss
curious1
curious1

Reputation: 14717

Why does h1 header look wider in Firefox than in other browsers

I am puzzled by this situation. Here the jsfiddle link:

http://jsfiddle.net/mddc/jkxy24x5/

Here is HTML:

<h1>Test Header</h1>

Here is the CSS:

body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 0.8em;
}

h1 {
    color: #333333;
    line-height: 1.5em;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h1 {
    border: 0 none;
    margin: 0;
    padding: 0;    
}

h1 {
    color: #999999;
    font-family: "Arial Narrow",Arial,Helvetica,sans-serif;
    font-size: 2.3em;
    letter-spacing: 0.03em;
    line-height: normal;
    margin: 0 0 12px;
}

In the above, I extracted exact CSS code and their order from the actual website. The h1 text looks wider in Firefox than in other browsers. How can I make it look narrower in Firefox, just like in other browsers?

Upvotes: 0

Views: 106

Answers (3)

Grasper
Grasper

Reputation: 1313

because 

font-family: "Arial Narrow",

is not recognized by Firefox.

but you can fix it if you Try to add font-stretch: condensed

http://jsfiddle.net/jkxy24x5/1/

Upvotes: 4

Onovar
Onovar

Reputation: 739

Firefox doesn't recognize the font "Arial Narrow" So you have 2 options

  • Option 1:

At the font so firefox can recognize it:

@font-face {
  font-family: "Arial Narrow";
  src: url(http://linktofont.com);
}
  • Option 2: use a font that's known by all browsers

Upvotes: 0

Red2678
Red2678

Reputation: 3287

Remove the 

font-family: "Arial Narrow",Arial,Helvetica,sans-serif;

From the H1 and use the default font. Or employ a open source font from Google or Adobe.

Upvotes: 1

Related Questions