CODEWITHSUNDEEP
firefoxfont-face
waterschaats
waterschaats

Reputation: 994

@fontface FireFox(10) is rendering text very bold

I have implemented a font in css with @font-face, and its looking way fatter when loaded in Safari. Does anybody know what can cause this?

@font-face {
    font-family: 'SerifaBold';
    src: url('/css/serifbol-webfont.eot');
    src: url('/css/serifbol-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/serifbol-webfont.woff') format('woff'),
         url('/css/serifbol-webfont.ttf') format('truetype'),
         url('/css/serifbol-webfont.svg#SerifaBold') format('svg');
    font-weight: 100;
    font-style: normal;

}

Upvotes: 3

Views: 3346

Answers (4)

Aidan Foster
Aidan Foster

Reputation: 11

When using web typefaces with "font variations" including different weights and/or italics included in the font family, always apply "font-style: normal" & font-weight: 400; (or font-weight:normal) to each style declaration. Make sure to explicitly declare each font-family differently for each variation:

EG: I'm using Helvatica Neue from fonts.com

strong, b {
  font-family:'HelveticaNeueW01-75Bold', 'Arial Black', Arial, sans-serif;
  font-weight: 400;
}

em, i {
  font-family: 'HelveticaNeueW01-56It',  Arial, sans-serif;
  font-style: normal;
}

Firefox will "help out" your fonts by faux-bolding & faux-italicizing your nice @font-face type making them really ugly and ruining all the hard work the designer did in creating the fonts.

This applies to all sources of fonts including typekit, google, fonts.com and locally hosted fonts.

Upvotes: 1

mayks
mayks

Reputation: 11

The same problem on my client's website had driven me crazy, but I finally found the problem. When you call 'SerifaBold' in any of your CSS class, make sure that you also put font-weight: normal;

That finally solved the problem for me.

Upvotes: 0

Boris Zbarsky
Boris Zbarsky

Reputation: 35054

Your font-face rule is telling the browser that this is an ultralight font (the font-weight: 100 part). Then you're presumably asking the browser to use this font for text that has normal weight (font-weight: 400) or is bold (font-weight: 700). The browser sees that it's got an ultralight font (because you told it so) and needs a normal font, and it does what's called "synthetic bolding": artificially making the letters bolder by drawing them several times with a slight offset.

There is no standard for synthetic bold, and the default behaviors of browsers differ.

If you're trying to use this font for bold text, and it's already a bold face, you should say so in your font-face rule, using the font-weight descriptor.

Upvotes: 5

Dan
Dan

Reputation: 11

I've found the same thing happens. Its almost as if its an entire weight above what it should be. Maybe try with the non-bold version of the font as a starting point?

Upvotes: 0

Related Questions