Oct 10, 2013

Display India Rupee Symbol (Rs.) in HTML pages

There are multiple ways to display the Indian Rupees Symbol in HTML Pages.
First method is a Web API http://cdn.webrupee.com/font
Using this in link tag you can display Rs. in HTML <link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font">

<span class="WebRupee">Rs.</span> 200

Earlier I was also using this API / Stylesheet in my HTML Pages. But suddenly the API broke and design of my HTML page got disturbed. Then after googling a bit I found another solution for this. I found the Font files of web rupee and method to use the font files with in the web page. The method is useful and normally used to display the other fonts that are not available on client sides. for e.g. Hindi Fonts. For this method :
1. You need to copy the webrupee ttf, eot and other font files and font.css in the root of website folder.
2. Give the reference to font.css
<link rel="stylesheet" type="text/css" href="/font.css">
3. Use the WebRupee class as described above.
<span class="WebRupee">Rs.</span> 200 /-

Rs. 200 /-

Using this method, you don't need to worry for any API break and your design won't disturb.

Attachment to this article contains all the supporting Font files, font.css and sample page using the font.css

Download Sample Code Here


Blogs | About Me | My Projects | Contact Me