CSS @font-face не работает с Firefox, но работает с Chrome и IE

В дополнение к добавлению следующего к вашему .htaccess: (спасибо @Manuel)

<FilesMatch "\.(ttf|otf|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

вы можете попробовать явно добавить типы MIME webfont .файл htaccess... вот так:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

В конце концов, мой .htaccess файл выглядит так (для раздела, который позволяет webfonts работать во всех браузерах)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

У меня тоже была эта проблема. Я нашел ответ здесь: http://www.dynamicdrive.com/forums/showthread.php?t=63628

Это пример решения, которое работает на firefox, вам нужно добавить эту строку в свой шрифт face css:

src: local(font name), url("font_name.ttf");

у меня была точно такая же проблема. Мне пришлось создать новую папку под названием "шрифты" и поместить ее в wp_content. Я могу получить доступ к нему из моего браузера, как это http://www.example.com/wp-content/fonts/CANDY.otf

ранее папка fonts находилась в том же каталоге, что и мой CSS-файл, а @font-face выглядел так:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Как я уже упоминал выше, это не работает в Firefox, но только с хромом. Теперь он работает потому что я использовал абсолютный путь:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Я просто оставлю это здесь, потому что мой коллега нашел решение для связанной проблемы "font-face не работает в firefox, но везде".

проблема заключалась в том, что Firefox испортил объявление семейства шрифтов, это привело к его исправлению:

body{ font-family:"MyFont" !important; }

PS: Я также использовал html5boilerplate.

Я бы упомянул, что некоторые шрифты имеют проблемы в firefox, если их имя файла содержит определенные символы. Недавно я столкнулся с проблемой с шрифтом 'Modulus', который имел имя файла'237D7B_0_0'. Удаление подчеркиваний в имени файла и обновление css в соответствии с новым именем файла решило эту проблему. Другие шрифты с похожими символами не имеют этой проблемы, что очень любопытно...вероятно, ошибка в firefox. Я бы рекомендовал сохранить имена файлов только для буквенно-цифровых символов.

У меня была та же проблема. Дважды проверьте свой код для H1, H2 или любого другого стиля, на который вы ориентируетесь с помощью правила @font-face. Я обнаружил, что мне не хватает комы после font-family: 'custom-font-family' Arial, Helvetica etc Он отлично отображался в каждом браузере, кроме Firefox. Я добавил кому, и это сработало.

для этого шрифта, в частности, вы должны использовать Google Font API:

http://code.google.com/webfonts/family?family=Droid+Sans

Если вы все еще хотите использовать генератор набора FontSquirrel, используйте опцию Smiley hack для устранения локальных проблем с шрифтом. После того, как вы сгенерировали комплект, проверьте, что сгенерированная демонстрация.html работает в FireFox. Держу пари, что так и есть. Теперь загрузите его на свой сервер-я уверен, что он тоже работает там, так как FontSquirrel потрясающий.

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

наконец, если ничего из этого не работает, обновите Firefox. Я написал все это, предполагая, что вы используете последнюю версию; но вы не указали, какую версию вы проверяете, так что это может быть ваша проблема тоже.

попробуйте nerfing объявление локального источника в вашем @font-face директивы.

есть известная ошибка в Firefox или Google Font API, которая предотвращает варианты шрифтов, которые будут использоваться, если шрифт установлен локально, и соответствует определенному локальному имени:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

чтобы эффективно nerf локальное объявление, просто сделайте свой локальный источник строкой какой-то ерунды. Большей частью общепринятое Соглашение для этого-использовать смайлик Юникод ("☺"). Зачем? У пола Айриша есть отличное объяснение в своем блоге:

http://paulirish.com/2010/font-face-gotchas/#smiley

У меня была именно эта проблема с запуском ff4 на mac. У меня был локальный сервер разработки, и моя декларация @font-face работала нормально. Я перешел на live, и FF будет "мигать" правильный тип при загрузке первой страницы, но при переходе глубже шрифт по умолчанию попадает в таблицу стилей браузера.

Я нашел решение заключается в добавлении следующего объявления .htaccess

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

нашел через

одно простое решение, о котором еще никто не упоминал, - это встраивание шрифта непосредственно в файл css с использованием кодировки base64.

Если вы используете fontsquirrel.com, в генераторе набора шрифтов выберите режим эксперта прокрутите вниз и выберите Base64 Encode под CSS Options - загруженный набор шрифтов будет готов к подключи и играй.

Это также имеет преимущество сокращения времени загрузки страницы, потому что он требует меньше запрос http.

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

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

кроме того, я бы предложил посмотреть на консоль ошибок Firefox, чтобы узнать, есть ли какие-либо синтаксические ошибки CSS или другие ошибки.

кроме того, я бы отметил вы, вероятно, хотите font-weight:bold во втором правиле @font-face.

С помощью an .htaccess Access Control Allow Origin rule не работал для меня, когда я столкнулся с этой проблемой.

вместо этого в IIS в веб.конфигурация вставьте систему.блок веб-сервера показан ниже.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

это работает как шарм для меня. Если необходимо ограничить доступ к определенному домену, замените * на домен.

У меня была такая же проблема с получением шрифт для правильного отображения в Firefox. Вот что я нашел, чтобы работать на меня. Добавьте косую черту перед каталогом, содержащим шрифт в атрибуте url. Вот мои до и после версии:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

обратите внимание на ведущую косую черту перед "шрифтами" в url-адресе? Это говорит браузеру, чтобы начать в корневом каталоге, а затем получить доступ к ресурсу. По крайней мере для меня - проблема решена.

можете ли вы проверить с firebug, если вы получаете некоторые 404? У меня были проблемы в проходе, и я обнаружил, что расширение было то же самое, но файл linux.ttf отличается от файла.ТЦФ... и он работал со всеми браузерами, кроме firefox.

жаль, что это помогает!

это проблема с тем, как вы настройка шрифта по пути. Поскольку вы не начали путь с"/", Firefox попытается найти шрифт на основе пути, в котором находится таблица стилей. Так что, в основном, в Firefox ищет свой шрифт в "корень/УСБ/шрифт" каталог вместо каталог "корень/шрифт". Вы можете легко исправить это, либо переместив папку шрифта в папку css, либо добавив / в начало ваших путей шрифта.

попробуйте это:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

попробуйте это....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

У меня была похожая проблема. Демонстрационная страница fontsquirel работала в FF, но не на моей собственной странице, хотя все файлы поступали из одного домена!

оказалось, что я связывал свою таблицу стилей с абсолютным URL (http://example.com/style.css) Итак, FF думал, что это происходит из другого домена. Изменение моей таблицы стилей ссылка href в /style.css вместо этого исправил вещи для меня.

возможно, ваша проблема-это проблема именования, особенно в отношении использования (или нет) пробелов и дефисов.

у меня была проблема similair, которую я думал, что исправил, поместив необязательный элемент кавычки ( ' ) вокруг font-/family-names, но это фактически неявно исправило проблему именования.

Я не совсем в курсе CSS-спецификации, и есть (по крайней мере, для меня) некоторая двусмысленность в том, как разные клиенты интерпретируют спецификации. Кроме того, он также кажется, что это связано с соглашениями об именах PostScript, но, пожалуйста, исправьте меня, если я ошибаюсь!

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

@font-face {
  font-family: "DroidSerif Regular";

Если ты дроид фактическая фамилия, из которой Sans и засечками являются членами, как, например, их детей Без Регулярного или Засечек Bold, тогда вы либо используйте пробелы всюду в concatinate идентификаторы, или вы удалите пробелы и использовать CamelCasing для фамилия и дефисы для суб-идентификаторы.

применительно к вашей декларации, это будет выглядеть примерно так:

@font-face {
  font-family: "Droid Serif Regular";

или

@font-face {
  font-family: DroidSerif-Regular;

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

Я нашел эту статью полезной для понимания некоторых аспектов: http://mathiasbynens.be/notes/unquoted-font-family

В этой статье есть некоторые более подробные сведения о PostScript в частности, и некоторые ссылки на спецификацию Adobe PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

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

этой

body {font-family: "DroidSerif Regular", serif; }

становится

body {font-family: DroidSerifRegular, serif; }

в моем случае, я словед проблема с вставкой шрифта-лицо стиль кода

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty в заголовке вашего индекса.html или php страница, в теге стиля. Работает на меня!

из-за этого это один из лучших результатов Google для этой проблемы я хотел бы добавить, что решило эту проблему для меня:

Мне пришлось удалить формат (opentype) из src font-face, затем он работал и в Firefox. До этого он отлично работал в Chrome и Safari.

может быть его не из-за вашего кода, его из-за вашей конфигурации Firefox.

почем Tool barЗападный до Unicode

View > Text Encoding > Unicode

Если вы пытаетесь импортировать внешние шрифты вы столкнулись с одной из самых распространенных проблем с Firefox и других браузеров. Некоторое время ваш шрифт хорошо работает в google Chrome или в одном из других браузеров, но не в каждом браузере.

есть много причин для этого типа ошибки одной из самых больших причин этой проблемы является предыдущий определенный шрифт. Вам нужно добавить !важное ключевое слово после окончания каждой строки кода CSS как ниже:

пример:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

описание: Введите код выше в свой CSS-файл или код здесь. В приведенном выше примере замените "Hacen Saudi Arabia" на ваш шрифт-семейство и замените url-адрес в соответствии с вашим каталогом шрифтов.

Если вы входите !важно в вашем браузере кода css автоматически сосредоточиться на этом разделе и переопределить ранее использованное свойство. Для получения более подробной информации посетите: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

У меня была та же проблема, и я решил ее, добавив мета для контента:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

это происходит в Firefox и Edge, если у вас есть тексты Unicode в вашем html.

Я не знаю, как вы создали синтаксис, поскольку я никогда не использовал svg в объявлении шрифта, но Font Squirel имеет действительно хороший инструмент для создания пуленепробиваемого синтаксиса шрифта-лица только из одного шрифта.

http://www.fontsquirrel.com/fontface/generator

также может быть использование URL-адреса в пути тега font-face. Если вы используете "http://domain.com" это не работает в Firefox, для меня изменить его на "http://www.domain.com-сработало.

моя проблема заключалась в том, что Windows назвала шрифт "font".TTF 'и firefox ожидаемый' шрифт.ttf ' я увидел, что после открытия моего проекта в linux, переименовал шрифт в propper name и все работает