Adding the new rupee symbol to your website.
Posted on 27th January 2011

Prof Udaya Kumar with Ron
Prof Udaya Kumar with Ron

It was indeed a pleasure to see the new Indian rupee symbol come onto the world stage. It makes me proud as an Indian. Having met the creator Prof.Udaya Kumar from the Design School, IIT Guwahati I know its an excellent well thought out symbol creating a perfect balance between devnagri and english symbolism.

Being a web based company the question naturally occoured that now how do we use this symbol online. There are a lot of version available online. We like to use the rupee foradian available here
http://blog.foradian.com/font-with-indian-rupee-symbol-download-and-us

The rupee font works on a server-side font principle i.e. the font resides on the server and not on your computer unlike other fonts we see on webpages. This technique is mainly used to create language based websites and is useful for this purpose as well.

Step1: Download the rupee fonts
http://miracleworx.com/rupee/rupee.rar

This contains
Rupee_Foradian.ttf,
Rupee_Foradian.svg,
Rupee_Foradian.woff and
Rupee_Foradian.eot.

Upload these to a folder on your server named rupee.

Step 2: Add the rupee font definitions to an external style sheet.

@font-face{
font-family: 'Rupee Foradian';
src: url('../rupee/Rupee_Foradian.eot');
src: local('Rupee Foradian'), url('../rupee/Rupee_Foradian.ttf') format('truetype'),
url('../rupee/Rupee_Foradian.woff') format('woff'),
url('../rupee/Rupee_Foradian.svg') format('svg');
font-weight: normal;
font-style: normal;
}

Now you may use it to create different styles just like any normal font.

Eg.

.yellowrupee {
font-family: "Rupee Foradian";
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #ff0;
text-decoration: none;
}

Step 3: using the span within the document.

<span class="yellowrupee">`</span>

The ` symbol (the key to the left of 1 and above the tab key below the tilde ~) is used where you need the rupee symbol to appear.

Its as easy as that. Ofcourse there might be comflicts on different servers so do post here if you encounter any problems.

Cheers,
Ron

Visit us at http://www.miracleworx.com

View our work at http://www.miracleworx.com/portfolio.htm

Search

Blog Categories

Design (38)
Technology (33)
Marketing (57)
Strategy (42)
Books (20)
Quick Reads (24)
Other (15)
News (17)
Popular Posts:
A career as a web design professional in India. List of web design courses and institutes in India.
List of credit card payment gateways in India. Options for adding a payment gateway to your e-commerce website.
Applying Micheal Porter's Five Forces Model to the Web Design Industry
Social media integration - the definition of integration in the social media paradigm by Prashant Pinge
Adding credit card payment options to your website in India
Copyright © 2016. Miracleworx Web Design India. All Rights Reserved. The best at website design in India
TOP