Tags

, ,

custom-webfontFew years back we were facing too much trouble to use our favorite fonts for any text in our website. But now @font_face has made our life very easy. We are now able to use our favorite fonts in any text and for any browser.

So without wasting any time, lets get started.
First of all what is @font_face :

It’s nothing but a CSS property that helps to use external font files with some inherent features. It helps you to use the uploaded font files in your CSS file and here it provides the opportunity to rename your font. So lets see the descriptors.

font-family : It helps you to define your new font.

src : It helps you to define your new font. It’s some difference in the file formats. Cause all the file formats are specific for different browsers. this you can write as separate src lines or in a single line with comma separated way.

( .eot ) This is for IE 9.
( .eot?iefix ) This is for IE 8.
( .woff ) Most of the modern browsers.
( .ttf ) This is for Safari, Android, iOS.
( .svg#svgFontName ) This is for Legacy iOS. If you need for that purpose.

font-style : It helps you to define the font style. Like – italic, oblique etc.

font-weight : It helps you to define the thickness of your font.

unicode-range : It helps you to define the range of unicode characters which your font supports.
Now lets have a look to the syntax :

/* Font face integration */
 @font-face {
 font-family: 'MyFontFamily';
 src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
 src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
 url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
 url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
 url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
 }

Hope that’s will help you guys. So happy knowledge sharing 🙂

Advertisements