How to use CSS @font-face

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.


Some browsers support @font-face, some do not. 


The @font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari. 


However, Internet Explorer 9 only supports .eot type fonts, while Firefox, Chrome, Safari, and Opera support .ttf and .otf type fonts.

How do i use @font-face

The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features.


Initially you define the rule, "font-family" is what you want to call the font, "src" is where it can be found, include a "font-weight" (not needed for normal, but required by everything else, bold, thin etc).


@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
    font-weight:400;
}


Then just use it like any other font in any other style rule.


p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

@FONT-FACE GENERATOR

http://www.fontsquirrel.com/fontface/generator

Use this link for generating @font-facehttp://www.fontsquirrel.com/fontface/generator