Use @font-face Correctly: Avoid Faux Bold

Sometimes when I load up a web page that uses Lora as its heading font I see this:

However a heading in Lora should look like this:

In the first image we are seeing “faux bold”. This is when the CSS of the page uses @font-face to specify the normal weight font like this:

@font-face {
    font-family: 'Lora';
    src: url('/assets/fonts/Lora-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

Since the font-weight only specifies normal and there is no corresponding @font-face entry for bold, the browser is forced to emulate bold by applying an algorithm to the normal weight. As you can see it doesn’t even come close to the actual font.

The real solution is to have a font-face entry for every font that you use on the page. Since I use normal, bold and italcs on this page, the CSS contains all three entries:

@font-face {
    font-family: 'Lora';
    src: url('/assets/fonts/Lora-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('/assets/fonts/Lora-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'Lora';
    src: url('/assets/fonts/Lora-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;

}

As a result I don’t have faux bold or italics on my page. If you use @font-face don’t forget to put all of entries in your CSS so you can avoid faux bold.