Tuesday, 1 February 2011

HTML5: Understanding @font-face



 @font-face {
  font-family: 'Droid Sans';
  src: url(Droid_Sans.ttf);
 }

Here we have defined a new custom font-family with remote font file attached.
Now we can use this newly defined font as:
.modern_text {
  font-family: 'Droid Sans';
 }
If you want to download some cool fonts, go to google font directory. It lets you browse all the fonts available via the Google Font API.
http://code.google.com/webfonts
 

Also try this awesome font previewer screen to visualize how the custom fonts look like before you download:
http://code.google.com/webfonts/preview#font-family=Droid+Sans
  


















So how do we load the custom fonts directly using google APIs? Add a new css link like this:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata">
Now use that font anywhere or everywhere
<p style="font-family: 'Inconsolata'">This Text looks different</p>

2 comments:

  1. can we show the new indian rupee symbol using @font-face?

    ReplyDelete
  2. Yes we can. Add the font file ttf(few more formats of this file available as per browser support). Include the following in css:

    @font-face{
    font-family: "WebRupee";
    src: url('WebRupee.V2.0.ttf') format('truetype');
    }
    .Rupee{
    font-family:"WebRupee",<other font(s) if WebRupee unavailable> ;
    font-size: 14px;
    }

    Where you are referring in HTML add this
    <span class="Rupee">INR</span>

    'INR' will be displayed in case font file is unavailable.

    ReplyDelete