Знак рубля для html

Щоб використовувати його на локальному комп'ютері - устанвливается шрифт. Шрифт є в двох форматах - rouble.ttf ( "Трутайп") або rouble.otf ( "Оупентайп")

У цьому файлі є зображення символу для різних шрифтів:

a - Arial Regular
b - Arial Italic
c - Arial Bold
d - Arial Bold Italic
e - Georgia Regular
f - Georgia Italic
g - Georgia Bold
h -Georgia Bold Italic
i - Tahoma Regular
j- Tahoma Bold
k - Times Regular
l - Times Italic
m - Times Bold
n - Times Bold Italic
o - Lucida Regular
p - Verdana Regular
q - Verdana Italic
r - Verdana Bold
s - Verdana Bold Italic

Тобто, якщо ми напишемо англійську букву шрифтом AlsRubl, то знак рубля буде відповідати шрифту Arial Regular.

Виглядає це так:

Тепер скористаємося сервісом Font Squirrel для генерації файлів шрифту для найпоширеніших браузерів. Див. Як це робиться.

В даному випадку зі шрифтом rouble в генераторі шрифтів потрібно використовувати такі настройки:

Що тепер з цим архівом робити. Можна, наприклад, в папці шаблону Joomla створити папку fonts і завантажити туди 4 файлу:

rouble-webfont.eot
rouble-webfont.woff
rouble-webfont.ttf '
rouble-webfont.svg

А в файл з css кодом додати визначення шрифту:

Тепер, щоб в тексті html сторінки відобразити знак рубля робимо так:

Замість англійської літери a в тексті сторінки ми побачимо знак рубля для шрифту Arial.

Думаю, краще буде визначити клас для знака рубля:

і використовувати в тезі span НЕ атрибут style, а class:

Не зовсім зрозуміло як:
1. Тепер, щоб в тексті html сторінки відобразити знак рубля робимо так:
2.Думаю, краще буде визначити клас для знака рубля:
3.и використовувати в тезі span НЕ атрибут style, а class:
Як і куди все це прописувати?

Друзі, а хто-небудь впорався з відображенням рубля в листі? Викладіть, будь ласка, по-докладніше, як це можна зробити.