Webfont + цвет при наведении: часть текста не меняет цвет

Я видел это несколько раз, только на Webkit. Сценарий таков, что у вас есть какой-то текст с парящим цветом, и онс использованием пользовательского шрифта webfont. При наведении курсора часть самой правой буквы не приобретает цвет при наведении. Чтобы понять, что я имею в виду, просмотрите эту скрипку в Chrome или Safari и внимательно посмотрите на «r». в конце текста при наведении курсора он не полностью красный.

http://jsfiddle.net/jaredh159/xPZB8/

HTML из скрипки:

<a>Some Text Foo Bar</a>

CSS из скрипки:

@font-face {
    font-family: 'stephanie_marie_jfregular';
    src: url('stephanie-marie-jf-webfont.eot');
    src: url('stephanie-marie-jf-webfont.eot?#iefix') format('embedded-opentype'),
         url('stephanie-marie-jf-webfont.woff') format('woff'),
         url('stephanie-marie-jf-webfont.ttf') format('truetype'),
         url('stephanie-marie-jf-webfont.svg#stephanie_marie_jfregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

a {
    font-family: stephanie_marie_jfregular;
    color: #000;
    font-size:50px;
}

a:hover {
    color: #ff0000;
}

Что это? Поправимо? Это просто случай плохо созданного файла веб-шрифта или плохого шрифта? Кто-нибудь знаком с этой проблемой или есть обходной путь?

Ответы на вопрос(1)

Ваш ответ на вопрос