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

195

Следующий код работает как в бета-версии 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 . Как это возможно? Чего мне не хватает?

Каушик Гопал
источник
2
В настоящий момент я сталкиваюсь с этой проблемой с генерируемыми директивами и шрифтами FontSquirrel.
Джейсон
для тестирования вы можете попробовать добавить объявления @ font-face в ваш html между <style>тегами и посмотреть, есть ли у вас такая же проблема?
Chris_O
добавление одной запятой может решить эту проблему, например: формат url ('Sans-Serif') ('woff')
Farzan Balkani

Ответы:

234

МЕСТНО РАБОТАЮЩИЙ САЙТ (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 для шрифта, некрасиво, но это может также работать.

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

Manuel
источник
Если вы не работаете локально, то это, вероятно, не решит эту проблему, но вы все равно можете использовать корневые пути на живом сайте, то есть «/ resources / font» вместо относительных, таких как «../ шрифт ", но я не знаю о thumblr: если вы можете дать URL для сайта, я могу посмотреть его.
Мануэль
Декларация шрифта прекрасно работает в Chrome, Safari, даже во всех случаях, начиная с IE6 ... но не в Firefox.
Джейсон
3
Ах, вы говорите о печально известной междоменной проблеме: вы можете использовать свой шрифт в кодировке base64 или попросить thumblr добавить дополнительный заголовок «Access-Control-Allow-Origin» при обслуживании шрифтов.
Мануэль
Тогда насколько смехотворна строгая междоменная политика Firefox? Мол, CDN и сайт совместно используют один домен, только разные субдомены.
Джейсон
1
@ Джейсон, грязная 64-битная кодировка тоже не работает? Это сработало для меня.
Каушик Гопал
42

В дополнение к добавлению следующего к вашему .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
alademann
источник
У меня тоже сработало. Спасибо, Зулоди!
Джеймс
Работа для меня, как шарм! Спасибо
Moxet
1
Сделал трюк для меня тоже. Я должен был также добавить woff2: AddType font / woff2 .woff2
hdomos
17

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

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

src: local(font name), url("font_name.ttf");
израильтянин
источник
3
Помещение local('name')в font-faceобъявление просто означает «попытаться загрузить шрифт« name »на компьютер пользователя. Если он не найден, загрузите веб-шрифт». (см. MDN документы ). Тем не менее, рад, что это сработало для вас! :)
Генри
4
Он работал «для вас», потому что у вас был установлен шрифт на вашем компьютере. Другие пользователи не увидят его. Вы исправили это только для вас.
Хьюго Делсинг
4

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

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

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

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

ruyadorno
источник
4

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

tarquinwinot
источник
4

У меня была точно такая же проблема. Мне пришлось создать новую папку с именем «шрифты» и поместить ее в 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");
}
Октавиан Владу
источник
3

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

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

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

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

davus
источник
3

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

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

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

пьер
источник
2
в комментариях к выбранному решению упоминается решение кодирования base64.
Каушик Гопал
@KaushikGopal Я думаю, что ответ должен быть отредактирован после того, как я опубликовал это.
Пьер
3

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

niall.campbell
источник
ЭТОТ. MyFonts.com выкладывает свои файлы шрифтов, названные таким образом, и это приводит к рендерингу Firefox 35 всевозможными причудливыми способами. Переименование шрифта решило проблему.
Coreyward
2

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

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

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

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

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

Casey
источник
На самом деле вы не должны использовать Google Font API для этого. Существует проблема с Firefox, которая не позволяет использовать варианты шрифтов (курсив, полужирный и т. Д.), Если шрифт установлен локально. Единственный способ обойти это - найти объявление src с помощью смайлика (конечно, любой странный персонаж (ы) подойдет, это просто так ... счастливо).
Джейсон
Вот ссылка на отчет об ошибке: code.google.com/p/googlefontdirectory/issues/detail?id=13
Джейсон
2

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

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

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

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

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

Ясон
источник
Не знал, что PaulI придумал новый метод маркера, придется попробовать его и посмотреть, решит ли он мои проблемы со шрифтом в FF.
Каушик Гопал
[Обновление: хотя это полезно, но это не решает проблему]. Я все же указал на правильное решение.
Каушик Гопал
1

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

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

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

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

Дэвид Барон
источник
Хм .. да, Дэвид, мне кажется, что я запускаю его локально, но у меня раньше был подкаталог в том же каталоге. Таким образом, мой type.css находится в корневой папке, и там же находится папка со шрифтами. поэтому type.css и папка шрифтов находятся в одном каталоге. Чтобы быть в безопасности, я также попытался удалить его из каталога и непосредственно разместить шрифты. Это все еще не работает на Firefox.
Каушик Гопал
Теперь я начинаю чувствовать, что это одно из двух: 1) что-то не так в моем кодировании, если кто-нибудь заметит что-то из приведенного выше кода, пожалуйста, будьте любезны указать на это. 2) FF не обрабатывает @ font-face и многократный импорт файлов? Я использую main.css, который inturn импортирует @import type.css, который, в свою очередь, имеет ссылку на папку со шрифтами? Есть легкие люди? Кстати, спасибо за улов шрифта @David!
Каушик Гопал
Firefox прекрасно справляется с множественным импортом. Какую версию ты используешь? Отладка кода с использованием FireBug; использовать процесс устранения. Работа локально создает проблемы, которые могут быть устранены удаленно. Вот как вы отлаживаете!
Кейси
«Файлы в разных каталогах считаются разными доменами для междоменных правил» - нет, это не так.
Майк Чемберлен
1

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

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

борт
источник
1

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

WebFixItMan
источник
1

Если вы пытаетесь импортировать внешние шрифты, вы сталкиваетесь с одной из наиболее распространенных проблем с вашим 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

Ганеш Гарад
источник
0

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

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

ipalaus
источник
1
Я сильно сомневаюсь, что это будет 404 'только в одном браузере, а не в других.
Джейсон
@jason Один браузер может использовать тип файла, отличный от другого. :)
ipalaus
Ну, в случаях, когда я столкнулся с этой проблемой, я могу на 100% сказать, что сетевая панель Firebug показывает, что она успешно загружает шрифт.
Джейсон
0

Это проблема с тем, как вы настраиваете пути вашего 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";
}
rossisdead
источник
0

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

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

SKWebDev
источник
0

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

У меня была проблема 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/

Арри
источник
0

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

этот

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

становится этим

body {font-family: DroidSerifRegular, serif; }
CR41G14
источник
0

В моем случае я решил проблему со вставкой кода стиля 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. Работает для меня!

Александар
источник
0

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

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

theva
источник
0

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

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

View > Text Encoding > Unicode
Simplans
источник
0

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

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

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

амир мола
источник
-2

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

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

rnaud
источник
Спасибо, я использую fontsquirrel для вышеупомянутого :). Просто переформатируем с помощью табуляции и пробелов в читаемую форму.
Каушик Гопал
Вы никогда не использовали SVG в объявлении шрифта, но вы используете Font Squirrel? Затем вы использовали SVG в объявлении шрифта.
Джейсон
1
@jason: Вы можете отказаться от использования SVG с Font Squirrel.
rossisdead
-2

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

Nehbur
источник
-2

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

Миколай
источник