Font height differs for different font weights

Question

I just added a webfont to my CSS file. I'd like to use different weights of the same font. However if I set font-size: 14px at least Chrome and Firefox render the font in rather strange way.

All characters with font-weight: normal are in fact only 13px high and the bold parts are 15px high.†

Screenshot: (font-size set to 13px, 14px and 15px):

CSS font-face declaration:

@font-face {
    font-family: 'Frutiger';
    src: url('frutiger.eot');
    src: url('frutiger.eot?#iefix') format('embedded-opentype'),
         url('frutiger.woff') format('woff'),
         url('frutiger.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Frutiger';
    src: url('frutiger-bold.eot');
    src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
         url('frutiger-bold.woff') format('woff'),
         url('frutiger-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Usage Example:

<p style="font-family: Frutiger; font-size: 13px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 14px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p style="font-family: Frutiger; font-size: 15px">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>

Source of font:

Unknown, file has been passed along in my company for years. I used Font Squirrel to generate the *.woff, *.svg, and *.eot files. Same results with and without Font Squirrel's hinting feature.

Live Example:

http://font-render-issue.herokuapp.com/

Is there a way I can fix this?

_{† If you blend the first line (13px) over the second (14px) you can see that the non-bold parts match exactly. If you do the same thing with the second and third (15px) line, you can see that the bold parts match (at least in terms of height).}

Answer 1

1) Like Jukka K. Korpela says, there is no CSS that actually uses the font.
2) The strange rendering you experience is the browser that tries to fake the bold style.

CSS:

@font-face {
    font-family: 'Frutiger';
    src: url('frutiger.eot');
    src: url('frutiger.eot?#iefix') format('embedded-opentype'),
         url('frutiger.woff') format('woff'),
         url('frutiger.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Frutiger';
    src: url('frutiger-bold.eot');
    src: url('frutiger-bold.eot?#iefix') format('embedded-opentype'),
         url('frutiger-bold.woff') format('woff'),
         url('frutiger-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* You did this inline with style="...". */
/* The font from the first @font-face */
p { font-family: Frutiger; }
/* Gets the bold font from the second @font-face */
strong { font-weight: bold; } 

.small { font-size: 13px; }
.medium { font-size: 14px; }
.large { font-size: 15px; }

HTML:

<p class="small">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="medium">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>
<p class="large">ABCABC<strong>ABCDABCD</strong>ASDFASDF</p>

EDIT

The font's look fine on my machine (Mac, Firefox, Safari). woff files are used.

Then I submitted the example.html to browsershots: http://browsershots.org/http://font-render-issue.herokuapp.com/example.html#
A lot of different outputs. Windows needs (better) hinting.

The Grid Fit ('gasp' table) of the fonts have one entry. They both have one range defined at 65535, which is okay.

I also bumped into the copyright info. You might want to consider alternative fonts. ;) http://joelcrawfordsmith.com/new/font/frutiger

The two fonts are from the same release. But a local file may take precedence. You can disable loading local files with the font face smiley hack.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺︎'),
         url('GraublauWeb.otf') format('opentype');
}

This is all I can think off for now.