Implement the new Saudi Riyal Symbol in your Website & Apps

This repository offers the new Saudi Riyal (SAR) symbol in various formats, optimized for seamless integration into websites. By utilizing a custom font with a dedicated Unicode character, you can easily adjust the color, size, and styling to match your design needs.

Unicode

The ê entity represents the hexadecimal Unicode U+00EA which we're using in our font files to represent the new symbol.

Available Formats

Font Files

• TTF
• OTF
• WOFF
• WOFF2

Vector Graphics

• SVG
• EPS

Raster Images

• PNG
• JPG

Demo Preview

Here is a screenshot of the index.html page:

Installation via npm

You can install this package via npm:

npm install @abdulrysr/saudi-riyal-new-symbol-font

or using yarn:

yarn add @abdulrysr/saudi-riyal-new-symbol-font

Usage Options

Using the Provided Stylesheet

To use the font in your project, import the stylesheet in your main CSS file:

@import '/node_modules/@abdulrysr/saudi-riyal-new-symbol-font/style.css';

<span class="icon-saudi_riyal">&#xea;</span>

Adding the Style Yourself

Alternatively, you can define the font in your own CSS file using any font file format you wish:

@font-face {
    font-family: 'SaudiRiyalSymbol';
    src: url('saudiriyal.woff2') format('woff2'),
         url('saudiriyal.woff') format('woff'),
         url('saudiriyal.otf') format('opentype');
}
.symbol {
    font-family: 'SaudiRiyalSymbol', sans-serif;
    font-size: inherit;
    margin: 20px auto;
    color: inherit;
    font-weight: bold;
}

<span class="symbol">&#xea;</span>

Usage Guidelines

To maintain visual consistency, please follow these guidelines provided by the Saudi Central Bank (SAMA):

• Position: Place the symbol to the left of the numeral.
• Spacing: Keep a space between the symbol and the number.
• Proportions: Maintain the correct shape without distortion.
• Alignment: The symbol height should match the surrounding text.
• Direction: The symbol should follow the text direction.
• Contrast: Ensure sufficient contrast against backgrounds.

Refer to the full usage guide: SAMA Guidelines

LinkedIn

My LinkedIn Profile

🌍 Available Languages

• 🇺🇸 English
• ar العربية

Contributing

If you would like to contribute or suggest improvements, feel free to submit a pull request or open an issue.