The problem

Indeed, if we're using the code shown before, you may have noticed how your font may not be rendered correctly when using some of its variants.

For example, the following code will render the font with a bold weight in Gecko-based browsers (i.e Firefox), while it will render as a normal-weighted font in Webkit-based browsers (i.e Chrome, Opera).

/* CSS Document */
h1 {
	font-family: comfortaa,"Tahoma",sans-serif;
	font-weight: bold;
}

The solution

To prevent this kind of false-bold rendering issue, we'll have to define a new @font-face declaration for every font variant used. In our example, we need a bold font-weight, so we'll have to declare two @font-face fonts, one for the normal variant, and one for the bold variant.

/* CSS Document */
@font-face
{
    font-family: comfortaa;
    src: url('comfortaa.eot');
    src: local(comfortaa), url('comfortaa.ttf') format('opentype');

    font-weight:normal;
    font-style:normal;
    font-variant:normal;
}

@font-face
{
    font-family: comfortaa;
    src: url('comfortaa-bold.eot');
    src: local(comfortaa-bold), url('comfortaa-bold.ttf') format('opentype');

    font-weight:bold;
}

Now this applies mostly to bold variant issues but it can be used for any other variant like italic or small-caps.

More ?

If you're looking for more information about @font-face behaviours, I advise you to take a look at these websites :