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

Следующий код работает как в бета-версии Google Chrome, так и в IE 7. Однако в Firefox, похоже, есть проблема с этим. Я подозреваю, что это проблема того, как мои CSS-файлы включены, потому что я знаю, что Firefox не слишком дружелюбен к междоменному импорту.

Но это всего лишь статический HTML, и здесь нет вопроса о междоменной работе.

На моей посадке-page.html я делаю импорт CSS следующим образом:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

В main.css у меня есть другой импорт, например, так:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

и внутри type.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", serif; }

У меня есть каталог с именем "font" в том же месте, что и type.css. Этот каталог шрифтов содержит все файлы woff / ttf / svg и т. Д.

Я поставлен в тупик на этом. Он работает в Chrome и IE, но не в Firefox . Как это возможно? Чего мне не хватает?

МЕСТНО РАБОТАЮЩИЙ САЙТ (file:/// )

Firefox поставляется с очень строгой file:///политикой «file uri origin» ( ) по умолчанию: чтобы он вел себя так же, как и другие браузеры, перейдите about:config, отфильтруйте fileuriи переключите следующее предпочтение:

security.fileuri.strict_origin_policy

Установите значение false, и вы сможете загружать ресурсы локальных шрифтов на разных уровнях пути.

ИЗДАННЫЙ САЙТ

Согласно моему комментарию ниже, и вы испытываете эту проблему после развертывания своего сайта, вы можете попытаться добавить дополнительный заголовок, чтобы увидеть, если ваша проблема настраивается как междоменная проблема: это не должно, так как вы указываете относительные пути, но я бы все равно попробовал: в вашем файле .htaccess укажите, что вы хотите отправить дополнительный заголовок для каждого запрашиваемого файла .ttf / .otf / .eot:

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

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

Хорошее резюме доступно здесь

В дополнение к добавлению следующего к вашему .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 выглядит следующим образом (для раздела, который позволяет веб-шрифтам работать во всех браузерах)

# 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");

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

Проблема была в том, что Firefox испортил декларацию семейства шрифтов, в итоге это исправили:

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

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

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

У меня была точно такая же проблема. Мне пришлось создать новую папку с именем «шрифты» и поместить ее в 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, а только с Chrome. Теперь это работает, потому что я использовал абсолютный путь:

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

У меня была именно эта проблема при запуске ff4 на Mac. У меня был запущен локальный сервер разработки, и мое объявление @ font-face работало нормально. Я перешел в режим реального времени, и FF будет «мигать» правильным типом при первой загрузке страницы, но при более глубокой навигации гарнитура по умолчанию настроена на таблицу стилей браузера.

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

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

найдено через

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Когда я столкнулся с этой проблемой, использование разрешения Allow Origin для управления доступом .htaccess не сработало.

Вместо этого в IIS в файле web.config вставьте блок system.webServer, показанный ниже.

<?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? Это говорит браузеру начать с корневого каталога, а затем получить доступ к ресурсу. По крайней мере, для меня - проблема решена.

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

Есть много причин для этого типа ошибки, одна из главных причин этой проблемы - предыдущий определенный шрифт. Вам нужно добавить ключевое слово! Important после окончания каждой строки кода 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

Можете ли вы проверить с Firebug, если у вас есть 404? У меня были проблемы с пропуском, и я обнаружил, что расширение было таким же, но linux file.ttf отличается от file.TTF ... и работал со всеми браузерами, кроме Firefox.

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

Это проблема с тем, как вы настраиваете пути вашего font-face. Поскольку вы не начинали путь с «/», Firefox будет пытаться найти шрифт на основе пути, в котором находится таблица стилей. Поэтому в основном Firefox ищет ваш шрифт в каталоге «root / css / font» вместо каталог "root / font". Вы можете легко исправить это, переместив папку шрифтов в папку 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, которую я решил исправить, поместив необязательные кавычки (') вокруг имени шрифта / фамилии, но это фактически неявно исправило проблему именования.

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

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

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

Если вы рассматриваете Droid как фактическое фамилию, членами которой являются Sans и Serif , как, например, их дочерние элементы Sans Regular или Serif Bold , то вы либо используете пробелы везде для объединения идентификаторов, либо ИЛИ удаляете пробелы и используете CamelCasing для familyName и дефисы для подидентификаторов.

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

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

ИЛИ

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

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

Я нашел эту статью полезной для понимания некоторых аспектов: 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; }

В моем случае я решил проблему со вставкой кода стиля font-face

<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 в заголовке вашей страницы index.html или php, в теге style. Работает для меня!

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

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

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

Попробуйте это от Tool bar Western до Unicode

View > Text Encoding > Unicode

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

<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 есть действительно хороший инструмент для создания пуленепробиваемого синтаксиса font-face только из одного шрифта.

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

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

Моя проблема заключалась в том, что Windows назвала шрифт «font.TTF», а firefox ожидал «font.ttf». Я увидел, что после открытия моего проекта в Linux переименовал шрифт в propper name, и все работает