@font-face и знак рубля на сайте

Для меня возможность подключения сторонних шрифтов на сайты всегда была мертвой темой, в основном, из-за засевшего в голову убеждения, что это связано прежде всего с большим количеством геморроя и плохой поддержкой различными браузерами.

На самом же деле, как оказалось, большая часть браузеров уже научилась работать со свойством @font-face, пусть и не в едином формате, но в удобоваримом виде, превосходящем по красоте sIFR и подобные технологии.

Некрасивый знак рубля в HTML меня сейчас мало интересует, хоть подход там с точки зрения конечного пользователя правильный.

Итак, используем свойство @font-face современных браузеров для отображения знака рубля.

Для начала нам необходимо подготовить шрифт, любезно распространяемый студией Самизнаетекого. Доступны и ttf, и otf, содержащие символы рубля для наиболее популярных шрифтов (Arial, Georgia, Tahoma, Times, Lucida, Verdana). На выходе нам нужно получить как минимум eot-файл шрифта, но с помощью сервиса мы скачаем сразу готовый архив с исходником, шрифтом eot, шрифтом SVG и WOFF. EOT шрифт нужен для Internet Explorer, WOFF поддерживается Firefox, а svg — для заплатки возможных ограничений в безопасности Google Chrome.

Еще днем сервис работал отлично, но на момент написания этой заметки валится большим количеством нотисов, варнингов и прочего хабара. Не думаю, что могут появиться проблемы со скачиванием архива. Шрифт доступен для общего использования, поэтому ничьих авторских прав мы не нарушаем (вроде бы).

Само подключение шрифта на страницу не такое сложное. Главное, начать объявление с названия в кавычках для дальнейшего использования:

@font-face {
 font-family: 'Ruble';
 src: url('Ruble.eot');
 src: local('ALS Rubl'),
 local('Ruble'),
 url('Ruble.woff') format('woff'),
 url('Ruble.svg') format('svg'),
 url('Ruble.otf') format('opentype');
}

После чего можно спокойно использовать подключенный шрифт:

span.ruble{font-family: "Ruble"}

Но есть одна существенная оговорка — пока подключаемые по необходимости файлы не будут загружены пользователю, он будет наблюдать соответствующие знакам в шрифте символы. То есть для шрифта Verdana Regular будет отображаться буква p латинская, что неприятно. Но положительный момент — размер подключаемых файлов, а он не превышает 10 килобайт, поскольку набор символов невелик.

Кстати, выбросив ненужные символы, можно и его уменьшить. То есть, что именно показывать пользователю, пока шрифты не подгрузились — решать вам. Тут на помощь должен прийти javascript.

Еще один менее неприятный момент — при копировании информации с сайта вместе со знаком рубля, вместо последнего будет копироваться как раз таки буква, соответствующая отображению знака. Опять же, если не прибегнуть к дополнительным ухищрениям с css и js.

UPDATE
Архив с подготовленными шрифтами можно скачать здесь. Страница с рабочим примером тут.