(CSS) Prevent @font-face variants render issue
/* CSS Document */ @font-face { font-family: comfortaa; src: url('comfortaa.eot'); src: local(comfortaa), url('comfortaa.ttf') format('opentype'); }
While @font-face custom fonts on websites is an accessible alternative to Cufon, some web browsers tend to render font variants differently. This can sometimes be quite painful for the standard UI/UX designer.
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 :