Technical Solution

How to embed custom webfonts using font-face in your site and ensuring the bold and italics work for the font

Varghese.t | | 2 min read

@font-face allows designers to specifically embed certain fonts in to their stylesheets. Now a days many sites are providing webfonts. For eg: Fontsquirrel, Webfonts etc. They are providing us with the css too, but it is not correct. This article explain about what they are doing wrong and how to fix this issue.

Let us see the wrong css declaration:


    @font-face {
    font-family: 'QuicksandRegular';
    src: url('Quicksand_Regular-webfont.eot');
    src: url('Quicksand_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Regular-webfont.woff') format('woff'),
         url('Quicksand_Regular-webfont.ttf') format('truetype'),
         url('Quicksand_Regular-webfont.svg#QuicksandRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: 'QuicksandBold';
    src: url('Quicksand_Bold-webfont.eot');
    src: url('Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Bold-webfont.woff') format('woff'),
         url('Quicksand_Bold-webfont.ttf') format('truetype'),
         url('Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
    font-weight: normal;
    font-style: normal;
    }

Let us see why the above css declaration is wrong


<body style="font-family:"QuicksandRegular;font-size:80px"></body>
<div>Aa</div>
<div><strong>Aa</strong></div>
<div><em>Aa</em></div>
<div><strong><em>Aa</em></strong></div>
<div><b>Aa</b></div>
<div><i>Aa</i></div>

The above example works but this is not the correct way. Eventhough if we don't assign Italic and bold fonts for QuicksandRegular, browser will render bold,italic,italbold in their own way. So there is a chance of font variation based on different browsers.

How to solve the above problem and how to declare web font css in a proper way?

Instead of defining separate font-family values for each font, We can use same font-family name for each font, and define the matching rule, like the below code.


    @font-face {
    font-family: 'QuicksandRegular';
    src: url('Quicksand_Regular-webfont.eot');
    src: url('Quicksand_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Regular-webfont.woff') format('woff'),
         url('Quicksand_Regular-webfont.ttf') format('truetype'),
         url('Quicksand_Regular-webfont.svg#QuicksandRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    @font-face {
    font-family: 'QuicksandRegular';
    src: url('Quicksand_Bold-webfont.eot');
    src: url('Quicksand_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Bold-webfont.woff') format('woff'),
         url('Quicksand_Bold-webfont.ttf') format('truetype'),
         url('Quicksand_Bold-webfont.svg#QuicksandBold') format('svg');
    font-weight: bold;
    font-style: normal;
    }
    @font-face {
    font-family: 'QuicksandRegular';
    src: url('Quicksand_Italic-webfont.eot');
    src: url('Quicksand_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Italic-webfont.woff') format('woff'),
         url('Quicksand_Italic-webfont.ttf') format('truetype'),
         url('Quicksand_Italic-webfont.svg#QuicksandItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    }
    @font-face {
    font-family: 'QuicksandRegular';
    src: url('Quicksand_BoldItalic-webfont.eot');
    src: url('Quicksand_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_BoldItalic-webfont.woff') format('woff'),
         url('Quicksand_BoldItalic-webfont.ttf') format('truetype'),
         url('Quicksand_BoldItalic-webfont.svg#QuicksandBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    }

The above css works perfectly in all browser in a unique way. These "<b><strong><em><i>" tags call corresponding fonts using the css rule that is font-weight and font-style based. Hope this helps!!

 

 

Related Topics