How to Use the New Saudi Riyal (SAR) Symbol in Your Website and E-commerce Store?

A Step-by-Step Guide for Websites and E-commerce Stores

Saudi Arabia has recently introduced a new symbol for the Saudi Riyal (SAR), marking a significant step in modernizing the country’s financial identity. Unlike the dollar ($) or euro (€), this new symbol cannot be simply typed or copied and pasted. Instead, it requires proper font integration to be displayed correctly across websites, apps, and digital platforms.

To make the transition easier, we have created a demo that showcases how you can implement the new SAR symbol seamlessly into your website. Keep reading to learn how to use it and integrate it into your business operations.

The New Saudi Riyal Symbol

Why Does the New SAR Symbol Require a Custom Font?

Unlike widely recognized currency symbols, the new Saudi Riyal symbol is not available in standard Unicode character sets. This means:

  • You cannot simply copy-paste it like $ or €.
  • You must use a font that contains the symbol.
  • Websites and applications need to load the font manually.

To solve this issue, we have created a custom font and demo file that allows you to easily display the SAR symbol in any digital platform.

 

Live Demo: See the SAR Symbol in Action

We’ve prepared a working demo that showcases how the new SAR symbol can be implemented in a web page.

🔗 Download the Demo Here

This demo includes:

✅ A custom WOFF font file
✅ HTML and CSS setup for smooth integration
✅ A practical example of how the SAR symbol appears in real-world pricing

Download :

WOFF

A custom WOFF font file

Upload the downloaded WOFF file to your website and link it in your CSS
Download
WOFF2

A custom WOFF2 font file

Upload the downloaded WOFF2 file to your website and link it in your CSS
Download
Demo File

HTML example

Working demo that showcases how the new SAR symbol
Download

How to Integrate the SAR Symbol into Your Website

1. Download the SAR Font

To properly display the new symbol, you’ll need to include the custom font file in your project.

📥 Download the SAR Font Here (Replace with your actual download link)

2. Add the Font to Your Website

Upload the downloaded WOFF or WOFF2 file to your website and link it in your CSS

@font-face {
   font-family: ‘SAR’;
   src: url(‘sar_shopvert.woff2’) format(‘woff2’),
   url(‘sar_shopvert.woff’) format(‘woff’);
}

3. Apply the Font to Prices

Use a CSS class to apply the SAR symbol where needed:

.icon {
   font-family: ‘SAR’;
}

Then, use it in your HTML:

<span class=”icon”>69.00</span>

Start Using the SAR Symbol in Your E-commerce Store Immediately!

If you run an e-commerce store, you can integrate the new Saudi Riyal symbol today without disrupting your operations. Here’s how:

For Shopify Stores

  1. Upload the SAR Font to Your Shopify Theme

    • Go to Online Store > Themes > Edit Code

    • Upload sar_shopvert.woff and sar_shopvert.woff2 to the Assets folder

    • Open your theme.css.liquid file and add the following:

      @font-face {
      font-family: ‘SAR’;
      src:
      url(‘{{ “sar_shopvert.woff2” | asset_url }}’) format(‘woff2’),
      url(‘{{ “sar_shopvert.woff” | asset_url }}’) format(‘woff’);
      }

  2. Apply the SAR Symbol to Product Prices

    • Open your theme.liquid or product.liquid file

    • Find the price display section and wrap it with the SAR font:

      <span class=”icon”>{{ product.price | money }}</span>

For WooCommerce (WordPress) Stores

  1. Upload the Font

  2. Modify WooCommerce Price Display

    • Add the following CSS to apply the SAR font to prices:

      .woocommerce-Price-amount { font-family: ‘SAR’ !important; }

For Custom E-commerce Stores

If your store is built on Magento, OpenCart, or another custom platform, follow the same approach:

  • Upload the font file to your server
  • Reference it in your CSS
  • Apply the font to all price-related elements

Frequently Asked Questions (FAQs)

No, the SAR symbol is not available in the standard character set. You need to use a custom font or an SVG file to display it.

Ensure that the custom font file (WOFF or WOFF2) is correctly hosted and linked in your CSS. Test across browsers and mobile devices.

For the official announcement, guidelines, and downloadable files, visit:

Tailored Solutions for Shopify Merchants

Personalize Your Brand's Journey: Standing Out in a Template-driven World

Unlike generic templates, custom mobile apps allow for personalized features and functionalities that cater specifically to your business requirements and customer preferences.

  • Complex Integrations
  • Personalized Interactions
  • Optimized Performance
  • Flexibility
Explore More

Tailored Solutions *

Shopify Solutions *

Custom Development *

Ongoing Support *

Headless Solutions *

Tailored Solutions *

Shopify Solutions *

Custom Development *

Ongoing Support *

Headless Solutions *