Знак рубля на сайт

Создаем шрифт RubRegular с знаком рубля. Где рисуем знак рубля на букву «б» а буквы «ру» пробелы.

<span class="bRub">500руб</span> 
</style>

    @font-face {
    font-family: 'RubRegular';
    src: url("data:font/truetype;base64,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") format("truetype");
    font-weight: normal;
}

    @font-face {
    font-family: 'RubRegular';
    src: url("data:font/truetype;base64,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") format("truetype");
    font-weight: bold;
}


.bRub {
    font-family: RubRegular, Arial, sans-serif;
}
<style>