@fontface FireFox (10) makes the text very bold

I have implemented a font in css with @ font-face and its look is thicker when loaded in Safari. Does anyone know what can do 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;




source to share

4 answers

Your font rule tells the browser that this is an ultra-light font (part font-weight: 100

). Then you will presumably ask the browser to use that font for normal weight ( font-weight: 400

) or bold ( font-weight: 700

) text . The browser sees that it has an ultra-light font (because you said so) and needs a normal font, and it does something called "synthetic bold": artificially making the letters bolder by drawing them several times with a slight offset.

There is no standard for synthetic bold and the default behavior of browsers is different.

If you are trying to use this font for bold text and it is already a bold face, you should say it in your font rule using a descriptor font-weight




When using web fonts with "font variants", including various weights and / or italics included in the font family, always use "font-style: normal" and font-weight: 400; (or font-weight: normal) for each style declaration. Remember 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" your fonts by faking and artificially highlighting your beautiful @ font-face, which makes them really ugly and ruins all of the designer's hard work when creating fonts.

This applies to all font sources, including fonts like kit, google, fonts.com, and locally hosted fonts.



I found the same thing. Its almost like all the weight over what it should be. Maybe try with a lean version of the font as a starting point?



The same issue on my client website drove me crazy, but I finally found the problem. When you call "SerifaBold" in any of your CSS classes, make sure you also putfont-weight: normal;

This finally solved the problem for me.



All Articles