Saudi Riyal Font – Display New SAR Currency Symbol in HTML

The Saudi Central Bank (SAMA) unveiled a new symbol for the Saudi Arabian Riyal (SAR), providing a modern visual identity that reflects the Kingdom’s cultural heritage and progressive economic vision. The design captures the essence of Saudi Arabia’s culture, with the word “Riyal” elegantly inspired by traditional Arabic calligraphy. This distinctive design is now the official symbol for the Saudi Riyal in both digital and print formats.

With the introduction of this new symbol, businesses, developers, and website owners serving the Saudi market will need to update their online platforms to display prices and currency labels correctly. This guide explains how to add and display the new Saudi Riyal symbol in HTML using a custom font, which is lightweight, fast, and compatible across browsers and devices.

Currently, there is no official Unicode assigned to the new Saudi Riyal symbol. Until Unicode registration is complete, the symbol will not display natively on all systems.

To use it today, you can import a custom Saudi Riyal font containing the new design. Once installed or hosted on your website, it can be displayed easily using HTML or CSS.

Step 1: Load the Saudi Riyal Font File

Upload the custom Riyal font (saudi_riyal.ttf) to your website directory or server. Ensure the file path is correct and accessible.

Step 2: Display the Symbol Using HTML

Once the font is loaded, you can display the new SAR symbol like this

This uses a private Unicode codepoint (E900) defined in the custom font.

Optional: Use CSS for Flexibility

@font-face {

  font-family: ‘saudi_riyal’;

  src: url(‘fonts/saudi_riyal.ttf’) format(‘truetype’);

}

.currency-symbol {

  font-family: ‘saudi_riyal’;

  font-size: 22px;

}

Then use it in HTML:

<span class=”currency-symbol”>&#xE900;</span>

If your website currently displays prices like:

Price: SAR 120

Price: ﷼ 120

You can replace them with the new symbol by:

1. Importing the Saudi Riyal font file.
2. Applying the HTML or CSS code above.

Testing on desktop and mobile devices to ensure consistent display.

• Preload the font for faster rendering:

<link rel=”preload” href=”fonts/saudi_riyal.ttf” as=”font” type=”font/ttf” crossorigin>

• Add a text fallback for accessibility:

<span class=”currency-symbol” aria-label=”Saudi Riyal”>&#xE900;</span>

• Optimise for mobile – adjust font size and alignment for smaller viewports.
• Maintain a backup option – keep “SAR” as a fallback in case the custom font fails.
• Plan for Unicode support – update your site once the symbol is officially included in Unicode.

What does it represent?
The symbol represents the Arabic word “Riyal”, stylised using the letters Ra (ر), Ya (ي), and Lam (ل), reflecting Saudi heritage and modern economic vision.

Why can’t I type it on my keyboard?
It is not part of Unicode yet. Use the custom font or HTML code to display it.

Is it free to use?
Yes, the custom font is free for web and design projects.

Will it work in Word or Excel?
Yes. Install the font, select it in Word or Excel, and type the mapped character (e.g., R) to display the symbol.

When will Unicode support it?
The Saudi Central Bank plans to submit it for Unicode approval soon.

• Compliance: Align with official Saudi monetary standards.
• Professionalism: Present a modern, localised identity.
• Cultural authenticity: Reflect Saudi heritage in your brand.
• Technical preparedness: Be ready for future Unicode adoption.

User trust: Improve recognition and clarity in pricing.

Many UAE-based websites are integrating the new Saudi Riyal symbol because:

• Regional business alignment: Ensures consistency for users transacting in SAR.
• Cross-border e-commerce: Enhances user experience for Saudi customers.
• Future-proofing for Unicode: Prepares websites for official Unicode adoption.
• Cultural respect & localisation: Acknowledges Saudi heritage and strengthens trust.

Technical consistency: Ensures the symbol displays correctly across desktops, mobile devices, and apps.

Updating your website with the new Saudi Riyal symbol ensures your business reflects Saudi Arabia’s evolving digital and economic identity. It blends cultural authenticity, technical accuracy, and modern design effortlessly. For UAE websites, it also demonstrates regional awareness and prepares platforms for cross-border commerce in a consistent and professional manner. kazeDigital can assist in integrating this HTML on Dubai-based websites, ensuring smooth implementation and full compatibility across devices and browsers.