Displaying the Indian currency symbol on a website

Unicode, fonts, and testing

It is possible to use the rupee Unicode character U+20B9 or ₹:

<span>&#x20B9;1,500</span>


To ensure a uniform image across all devices, set a stylesheet specifying the appropriate fonts:

.rupee-symbol {
    font-family: "Arial Unicode MS", "Arial", sans-serif; /* fallback to Arial if necessary */
}


For a more stylish touch, we can use FontAwesome:

<i class="fa fa-inr"></i>1,000


But don't forget to import FontAwesome:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


Remember, not all devices will have the correct fonts installed, so provide alternatives to maximise compatibility.

Custom fonts & APIs

Geeking out on fonts? Sure! You can go beyond Arial and use Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


Then specify the font in your CSS:

.rupee-symbol {
    font-family: 'Open Sans', sans-serif;
}


For standardised symbols, consider the WebRupee API:

<link href="http://cdn.webrupee.com/font" rel="stylesheet">


And then simply add a class:

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

Compatibility and accessibility

Browser support isn't always perfect — sorry Internet Explorer fans (or should I add, all three of you?) 😉

Consistently test on different browsers and devices and ensure the rupee symbol is displayed correctly.

In some cases, FontAwesome or external APIs might not load. Here's where our superhero CSS font stack swoops in:

.rupee-symbol {
    font-family: "Arial Unicode MS", Arial, sans-serif; /* Fallback to standard system fonts */
}


Use @font-face for fonts with the rupee symbol like a boss:

@font-face {
    font-family: 'CustomArial';
    src: url('myfont.woff') format('woff'); /* The secret sauce to controlling fonts */
}


User experience and accessibility

The right font and showcasing method amplify the user experience, especially for visitors dealing in Indian currency.

For meaningful semantics, consider:

<price value="1000" currency="INR">&#8377;1,000</price>


And boost accessibility with ARIA labels:

<span role="text" aria-label="Rupee value">₹1,000</span>


Remember: It's not a race, it's a marathon! Ensure your HTML validates to HTML5 standards.