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.

Also try this awesome font previewer screen to visualize how the custom fonts look like before you download:

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>


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

  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-family: "WebRupee";
    src: url('WebRupee.V2.0.ttf') format('truetype');
    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.