Firefox не распознает пользовательский шрифт

Я использую следующий CSS для определения пользовательского шрифта на веб-странице:

@font-face
{
    font-family:zapfino;
    src:url("zapfino.ttf");
}

Далее я определяю идентификатор, который его использует:

#custom_font
{
    font-family:zapfino;
    font-size:18px;
}

Я протестировал страницу на Safari и Chrome, и она отлично работает. Однако в Firefox шрифт не отображается, он возвращается к значению по умолчанию. Извините, если это репост, но я искал в Stackru и не могу найти ответ! Кто-нибудь знает, почему это происходит? см. здесь: www.moosecodes.com (он все еще в стадии разработки! прошу прощения за беспорядок!)

Источник

3 ответа

Решение

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

Однако Firefox и Chrome должны поддерживать TTF - формат, который вы используете.

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

Источник

Каждый браузер читает только один тип файлов для веб-шрифтов. К сожалению, все они имеют разные форматы файлов. Чтобы шрифт отображался корректно во всех браузерах, вам потребуется 4 различных типа файла шрифта - TTF, WOFF, SVG & EOT. Ваш код будет выглядеть примерно так:

@font-face {
font-family: 'Zapfino';
    src: url('Zapfino.eot');
    src: url('Zapfino.eot?#iefix') format('embedded-opentype'),
         url('Zapfino.woff') format('woff'),
         url('Zapfino.ttf') format('truetype'),
         url('Zapfino.svg#SansumiRegular') format('svg');
}

Этот код основан на таблице стилей, включенной в шрифты FontSquirell.

FontSquirell имеет конвертер, но вам нужно проверить свою лицензию. Zapfino - это коммерческий шрифт, принадлежащий Adobe(?), И, насколько я знаю, использование их шрифтов с @font-face является нарушением лицензионных соглашений.

TypeKit предлагает коммерческие шрифты для использования с @font-face за плату, соответствующую лицензионным соглашениям.

Источник

У меня была такая же проблема.... ответ от jlego был мне полезен. Мой шрифт был распознан в Chrome и IE. В FF мой TTF не распознавался, пока я не добавил формат ('TrueType') в мой файл CSS.

Источник
Другие вопросы по тегам