Как показывать знаки транскрипции?

В блоге "Study English Now", который посвящен изучению английского языка,  никак не обойтись без знаков транскрипции. Для показа знаков транскрипции я использую специальный (довольно известный и широкодоступный) шрифт PhoneticTM. Файл этого шрифта phontm.ttf можно скачать в том числе и с сайта Study English Now.

На веб-странице знаки транскрипции можно показывать как рисунки (готовые или динамически создаваемые с помощью PHP) или как текст, для которого задан фонетический шрифт. У каждого подхода свои плюсы и минусы. Мне проще не использовать рисунки, но посетитель сайта не увидит нужные знаки транскрипции, если у него не установлен нужный шрифт! Пока я просто предлагаю скачать и установить этот шрифт.

Чтобы упростить добавление тега с CSS-классом "phonetic", я использую конструктор, который формирует текст тега для знаков транскрипции.

Посмотреть конструктор тега для знаков транскрипции на JavaScript

Может, все-таки лучше использовать рисунки со знаками транскрипции, чтобы посетителю сайта не нужно было устанавливать шрифт?