CSS3 @font-face

the @font-face css at-rule allows authors to specify online fonts to display text. on their web pages.by allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers.

the@font-face at-rule may be used not only at the top level of a css but also any conditional-group at-rule.

an at-rule is a css statement beginning with an at sign '@' ,followed by an identifier, and

ending at the first semi-colon,';',or at the end of the first css block.

CSS @font-face syntax:-

      @font-face{
          		 font-weight:------;
           
           		 font-family:------;
           
          		 src::url('/example.com/fontdir//dax.pfr');
           
                    }

browser support.

propertybrowser support
@font-face

internet explorer9, firefox,chrome, safari and opera support the new @font-face rule.

note internet explorer 8 and earlier versions, do not support the @font-face rule.

@font-face file types.

  • internet explorer(all versions):eot
  • safari (3.2+):ttf/otf
  • iphone (3.1):svg
  • chrome (all versions):svg(ttf/otf) 
  • firefox (3.5):ttf/otf
  • opera (10+) ttf/otf

css3 font-face example

   <html>
          <head>
          
          <style type="text/css" >
          
    .embedded_fonts{
    
          src:url('www.truedoc.com/dax.eot'), 
          
          url('www.truedoc.com/dax.ttf');
          
          font-family:dax ;
          
          font-weight:bold ;
          
          font-style:italic ;
          
       }
          </head>      <body>
          
          <div  class="embedded_fonts" >
          
       <p>this is demo for font-face rule property see effect on paragraph fonts</p>
          
          </div>    </body>   </html>
propertyvalues
font-family

arial

serif

sens-serif

cursive

fantasy

monospace

font-style

normal

italic

oblique

font-weight

100           lighter

200

300

400

500           to

600

700

800

900           bolder

font-variant

normal

small-caps

font-stretch

normal

wider

narrower

ultra-condensed

extra-condensed

condensed

semi-condensed

semi-expanded

expanded

extra-expanded

ultra-expanded

srcurl