Search This Blog

Sunday, January 29, 2012

how-to-use-custom-fonts-on-your-website-with-css

Welcome to designers dairy blog  here i have post the article  you can use custom fonts on your website.first

you have to download the fonts u need to integrated in your website in four types Eot ,Woff, Ttf  and Svg

Format.  if u cant get any one of the formats u can  use this tool  font face to create  these following

formats http://fontface.codeandmore.com/ . upload the font u have any one of the format

 it will generate the font face css style and fonts formats. The below style has been genarate by this tool

fontface and i have applied in the following  Website 


Convert Font (.ttf or .otf):


http://www.freefontconverter.com/


<style type="text/css">
@font-face {
    font-family: 'TwCenMT-CondensedBold';
    src: url('fonts/tccb.eot');
    src: url('fonts/tccb.eot?#iefix') format('embedded-opentype'),
         url('fonts/tccb.woff') format('woff'),
         url('fonts/tccb.ttf') format('truetype'),
         url('fonts/tccb.svg#tccb') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'HelveticaNeue-Roman';
    src: url('fonts/helveticaneue.eot');
    src: url('fonts/helveticaneue.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaneue.woff') format('woff'),
         url('fonts/helveticaneue.ttf') format('truetype'),
         url('fonts/helveticaneue.svg#helveticaneue') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'TwCenMT-Condensed';
    src: url('fonts/tccm____.eot');
    src: url('fonts/tccm____.eot?#iefix') format('embedded-opentype'),
         url('fonts/tccm____.woff') format('woff'),
         url('fonts/tccm____.ttf') format('truetype'),
         url('fonts/tccm____.svg#tccm____') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Tunga-Bold';
    src: url('fonts/tungab.eot');
    src: url('fonts/tungab.eot?#iefix') format('embedded-opentype'),
         url('fonts/tungab.woff') format('woff'),
         url('fonts/tungab.ttf') format('truetype'),
         url('fonts/tungab.svg#tungab') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TwCenMT-Regular';
    src: url('fonts/tcm.eot');
    src: url('fonts/tcm.eot?#iefix') format('embedded-opentype'),
         url('fonts/tcm.woff') format('woff'),
         url('fonts/tcm.ttf') format('truetype'),
         url('fonts/tcm.svg#tcm') format('svg');

}

</style>

No comments:

Post a Comment

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...