@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
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
.
source to share
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.
source to share